fix(Table): documentation fixed

wfp · Aug 31, 2021 · a6b6eb7 · a6b6eb7
1 parent 5ed2159
commit a6b6eb7
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 503 deletions.
diff --git a/src/components/Table/Table.stories.js b/src/components/Table/Table.stories.js
@@ -229,26 +229,8 @@ export const Regular = (args) => (
   </Table>
 );
 
-/*export const UsingWithoutThead = (args) => (
-  <Table>
-    <tr>
-      <th>Vorname</th>
-      <th>Nachname</th>
-    </tr>
-    <tr>
-      <td>Max</td>
-      <td>Mustermann</td>
-    </tr>
-    <tr>
-      <td>Maxine</td>
-      <td>Mustermann</td>
-    </tr>
-  </Table>
-);*/
-
 export const UsingReactTable = (args) => {
   const columns = React.useMemo(() => sampleColumns, []);
-
   const data = React.useMemo(() => makeData(3), []);
   return <ReactTable {...args} columns={columns} data={data} />;
 };
@@ -261,13 +243,55 @@ UsingReactTable.story = {
   parameters: {
     docs: {
       storyDescription: text,
+      source: {
+        code: `
+function ReactTable({ columns, data, withBorder }) {
+  // Use the state and functions returned from useTable to build your UI
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable({
+    columns,
+    data,
+  });
+
+  // Render the UI for your table
+  return (
+    <Table {...getTableProps()} withBorder={withBorder}>
+      <thead>
+        {headerGroups.map((headerGroup) => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map((column) => (
+              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody {...getTableBodyProps()}>
+        {rows.map((row, i) => {
+          prepareRow(row);
+          return (
+            <tr {...row.getRowProps()}>
+              {row.cells.map((cell) => {
+                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </Table>
+  );
+}`,
+      },
     },
   },
 };
 
 export const TableSortingHeader = (args) => {
   const columns = React.useMemo(() => sampleColumns, []);
-
   const data = React.useMemo(() => makeData(8), []);
   return <ReactTableSorting {...args} columns={columns} data={data} />;
 };
@@ -276,6 +300,63 @@ TableSortingHeader.story = {
   parameters: {
     docs: {
       storyDescription: `Sorting`,
+      source: {
+        code: `
+function ReactTableSorting({ columns, data, withBorder }) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      initialState: {
+        sortBy: [
+          {
+            id: 'age',
+            desc: false,
+          },
+        ],
+      },
+    },
+    useSortBy
+  );
+  return (
+    <Table {...getTableProps()}>
+      <thead>
+        {headerGroups.map((headerGroup) => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map((column) => (
+              // Add the sorting props to control sorting. For this example
+              // we can add them into the header props
+              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                {column.render('Header')}
+                {/* Add a sort direction indicator */}
+                <TableSorting {...column} />
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody {...getTableBodyProps()}>
+        {rows.map((row, i) => {
+          prepareRow(row);
+          return (
+            <tr {...row.getRowProps()}>
+              {row.cells.map((cell) => {
+                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </Table>
+  );
+}`,
+      },
     },
   },
 };
@@ -309,6 +390,103 @@ TablePagination.story = {
   parameters: {
     docs: {
       storyDescription: hello,
+      source: {
+        code: `
+
+        function ReactTablePagination({ columns, data, withBorder }) {
+          // Use the state and functions returned from useTable to build your UI
+          const {
+            getTableProps,
+            getTableBodyProps,
+            headerGroups,
+            prepareRow,
+            page, // Instead of using 'rows', we'll use page,
+            // which has only the rows for the active page
+        
+            // The rest of these things are super handy, too ;)
+            canPreviousPage,
+            canNextPage,
+            pageCount,
+            gotoPage,
+            setPageSize,
+            state: { pageIndex, pageSize },
+          } = useTable(
+            {
+              columns,
+              data,
+              initialState: { pageIndex: 2 },
+            },
+            usePagination
+          );
+        
+          const changePage = (page) => {
+            gotoPage(page.page - 1);
+        
+            // Update PageSize
+            if (pageSize !== page.pageSize) {
+              setPageSize(page.pageSize);
+            }
+          };
+        
+          // Render the UI for your table
+          return (
+            <>
+              <pre>
+                <code>
+                  {JSON.stringify(
+                    {
+                      pageIndex,
+                      pageSize,
+                      pageCount,
+                      canNextPage,
+                      canPreviousPage,
+                    },
+                    null,
+                    2
+                  )}
+                </code>
+              </pre>
+              <Table {...getTableProps()} withBorder={withBorder}>
+                <thead>
+                  {headerGroups.map((headerGroup) => (
+                    <tr {...headerGroup.getHeaderGroupProps()}>
+                      {headerGroup.headers.map((column) => (
+                        <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+                      ))}
+                    </tr>
+                  ))}
+                </thead>
+                <tbody {...getTableBodyProps()}>
+                  {page.map((row, i) => {
+                    prepareRow(row);
+                    return (
+                      <tr {...row.getRowProps()}>
+                        {row.cells.map((cell) => {
+                          return (
+                            <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                          );
+                        })}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </Table>
+              {/*
+                Pagination can be built however you'd like.
+                This is just a very basic UI implementation:
+              */}
+              <Pagination
+                pageSize={pageSize}
+                pageSizes={[10, 20, 30]}
+                page={pageIndex + 1}
+                totalItems={data.length}
+                onChange={changePage}
+              />
+            </>
+          );
+        }
+        `,
+      },
     },
   },
 };