Add simple table pagination.

src/docs/pages/table/Pager.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useState } from "react";
+import { VuiBadge, VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiLink, VuiText, VuiTextColor } from "../../../lib";
+import { VuiTable } from "../../../lib/components/table/Table";
+import { createFakePeople } from "./createFakePeople";
+
+type Person = {
+  name: string;
+  id: string;
+  role: string[];
+  status: string;
+};
+
+const TOTAL_ROWS = 152;
+const ROWS_PER_PAGE = 20;
+const NUM_PAGES = Math.ceil(TOTAL_ROWS / ROWS_PER_PAGE);
+const people: Person[] = createFakePeople(TOTAL_ROWS);
+
+export const Pager = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [rows, setRows] = useState<Person[]>([]);
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [selectedRows, setSelectedRows] = useState<Person[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Mock request to fetch the rows.
+  useEffect(() => {
+    setIsLoading(true);
+    setSelectedRows([]);
+    const timeout = setTimeout(() => {
+      const startIndex = (currentPage - 1) * ROWS_PER_PAGE;
+      const endIndex = startIndex + ROWS_PER_PAGE;
+      setRows(people.slice(startIndex, Math.min(endIndex, people.length - 1)));
+      setIsLoading(false);
+    }, 2000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [currentPage]);
+
+  const columns = [
+    {
+      name: "name",
+      header: {
+        isSortable: true,
+        render: () => {
+          return "Name";
+        }
+      },
+      render: (person: Person) => (
+        <div>
+          <div>
+            <VuiLink onClick={() => console.log("Clicked", person.name)}>{person.name}</VuiLink>
+          </div>
+
+          <div>
+            <VuiText size="xs">
+              <p>
+                <VuiTextColor color="subdued">
+                  Nickname: {person.name[0]}-{person.name.split(" ")[1].slice(0, 4)}
+                </VuiTextColor>
+              </p>
+            </VuiText>
+          </div>
+        </div>
+      )
+    },
+    {
+      name: "id",
+      header: {
+        isSortable: true,
+        render: () => {
+          return "ID";
+        }
+      }
+    },
+    {
+      name: "role",
+      header: {
+        render: () => {
+          return "Roles";
+        }
+      },
+      render: (person: Person) => {
+        if (person.role.length > 0) {
+          return (
+            <VuiFlexContainer alignItems="center" spacing="s">
+              <VuiFlexItem grow={false} shrink={false}>
+                {person.role.join(", ")}
+              </VuiFlexItem>
+
+              <VuiFlexItem grow={false} shrink={false}>
+                <VuiCopyButton
+                  size="xs"
+                  value={person.role.join(", ")}
+                  options={[{ value: person.role.length, label: "Copy number of roles" }]}
+                />
+              </VuiFlexItem>
+            </VuiFlexContainer>
+          );
+        }
+      }
+    },
+    {
+      name: "status",
+      header: {
+        isSortable: true,
+        render: () => {
+          return "Status";
+        }
+      },
+      render: (person: Person) => {
+        return <VuiBadge color={person.status === "Active" ? "success" : "neutral"}>{person.status}</VuiBadge>;
+      }
+    }
+  ];
+
+  const actions = [
+    {
+      label: "Edit",
+      onClick: (person: Person) => {
+        console.log("Edit", person);
+      }
+    },
+    {
+      label: "Delete",
+      onClick: (person: Person) => {
+        console.log("Delete", person);
+      }
+    }
+  ];
+
+  return (
+    <>
+      {/* TODO: Encapsulate all of this state in a table hook */}
+      {/* TODO: Async searching */}
+      {/* TODO: Async sorting */}
+      <VuiTable
+        isLoading={isLoading}
+        columns={columns}
+        rows={rows}
+        actions={actions}
+        onSelectPreviousPage={currentPage > 1 ? () => setCurrentPage(currentPage - 1) : undefined}
+        onSelectNextPage={currentPage < NUM_PAGES ? () => setCurrentPage(currentPage + 1) : undefined}
+        selectedRows={selectedRows}
+        onSelectRow={(selectedRows) => setSelectedRows(selectedRows)}
+        onSort={(column, direction) => console.log("Sort", column, direction)}
+        searchValue={searchValue}
+        onSearchChange={(search) => setSearchValue(search)}
+        bulkActions={[
+          {
+            label: "Edit",
+            onClick: (people: Person[]) => {
+              console.log("Edit", people);
+            }
+          },
+          {
+            label: "Combine",
+            onClick: (people: Person[]) => {
+              console.log("Combine", people);
+            }
+          },
+          {
+            label: "Delete",
+            onClick: (people: Person[]) => {
+              console.log("Delete", people);
+            }
+          }
+        ]}
+      />
+    </>
+  );
+};

src/docs/pages/table/index.tsx

@@ -1,13 +1,22 @@
 import { Table } from "./Table";
+import { Pager } from "./Pager";
+
 const TableSource = require("!!raw-loader!./Table");
+const PagerSource = require("!!raw-loader!./Pager");
 
 export const table = {
   name: "Table",
   path: "/table",
   examples: [
     {
+      name: "With complex pagination",
       component: <Table />,
       source: TableSource.default.toString()
+    },
+    {
+      name: "With simple pager",
+      component: <Pager />,
+      source: PagerSource.default.toString()
     }
   ]
 };

src/lib/components/table/Table.tsx

@@ -4,6 +4,7 @@ import { Props as TableRowActionsProps, VuiTableRowActions } from "./TableRowAct
 import { VuiTableCell } from "./TableCell";
 import { Props as TableHeaderCellProps, VuiTableHeaderCell } from "./TableHeaderCell";
 import { Props as TablePaginationProps, VuiTablePagination } from "./TablePagination";
+import { Props as TablePagerProps, VuiTablePager } from "./TablePager";
 import { VuiFlexContainer } from "../flex/FlexContainer";
 import { VuiFlexItem } from "../flex/FlexItem";
 import { VuiText } from "../typography/Text";
@@ -22,18 +23,19 @@ type Column<T> = {
   render?: (row: T) => React.ReactNode;
 };
 
-type Props<T> = Partial<TablePaginationProps> & {
-  isLoading?: boolean;
-  columns: Column<T>[];
-  rows?: T[];
-  actions?: TableRowActionsProps["actions"];
-  bulkActions?: TableRowActionsProps["actions"];
-  onSelectRow?: (selectedRows: T[]) => void;
-  selectedRows?: T[];
-  onSort?: TableHeaderCellProps["onSort"];
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-};
+type Props<T> = Partial<TablePaginationProps> &
+  Partial<TablePagerProps> & {
+    isLoading?: boolean;
+    columns: Column<T>[];
+    rows?: T[];
+    actions?: TableRowActionsProps["actions"];
+    bulkActions?: TableRowActionsProps["actions"];
+    onSelectRow?: (selectedRows: T[]) => void;
+    selectedRows?: T[];
+    onSort?: TableHeaderCellProps["onSort"];
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+  };
 
 // https://github.com/typescript-eslint/typescript-eslint/issues/4062
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
@@ -45,6 +47,8 @@ export const VuiTable = <T extends Row>({
   currentPage,
   numPages,
   onSelectPage,
+  onSelectPreviousPage,
+  onSelectNextPage,
   selectedRows,
   onSelectRow,
   onSort,
@@ -231,11 +235,16 @@ export const VuiTable = <T extends Row>({
       </table>
 
       {/* Pagination */}
-      {currentPage && numPages && onSelectPage && numPages > 1 && (
+      {currentPage && numPages && onSelectPage && numPages > 1 ? (
         <>
           <VuiSpacer size="xs" />
           <VuiTablePagination currentPage={currentPage} numPages={numPages} onSelectPage={onSelectPage} />
         </>
+      ) : (
+        <>
+          <VuiSpacer size="xs" />
+          <VuiTablePager onSelectPreviousPage={onSelectPreviousPage} onSelectNextPage={onSelectNextPage} />
+        </>
       )}
     </>
   );

src/lib/components/table/TablePager.tsx

@@ -0,0 +1,49 @@
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiButtonTertiary } from "../button/ButtonTertiary";
+import { VuiIcon } from "../icon/Icon";
+
+export type Props = {
+  onSelectPreviousPage?: () => void;
+  onSelectNextPage?: () => void;
+};
+
+export const VuiTablePager = ({ onSelectPreviousPage, onSelectNextPage }: Props) => {
+  return (
+    <VuiFlexContainer justifyContent="center" alignItems="center">
+      <VuiFlexItem grow={false} shrink={false}>
+        <VuiButtonTertiary
+          icon={
+            <VuiIcon>
+              <BiLeftArrowAlt />
+            </VuiIcon>
+          }
+          color="neutral"
+          size="s"
+          onClick={() => onSelectPreviousPage?.()}
+          isDisabled={!onSelectPreviousPage}
+        >
+          Previous
+        </VuiButtonTertiary>
+      </VuiFlexItem>
+
+      <VuiFlexItem grow={false} shrink={false}>
+        <VuiButtonTertiary
+          icon={
+            <VuiIcon>
+              <BiRightArrowAlt />
+            </VuiIcon>
+          }
+          iconSide="right"
+          color="neutral"
+          size="s"
+          onClick={() => onSelectNextPage?.()}
+          isDisabled={!onSelectNextPage}
+        >
+          Next
+        </VuiButtonTertiary>
+      </VuiFlexItem>
+    </VuiFlexContainer>
+  );
+};