[FS-236]: Add Pagination To The Household List Table

[AmirabbasJ]

This PR adds pagination to the household list table.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
the-charity	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 19, 2023 8:29am

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[linear]

FS-236 Add Pagination to the Household List Table

Family/List/NotEmpty - Web App (Figma)

<DataTable
        table={table}
        loading={loading}
        onNext={onNext}
        onPrev={onPrev}
        fallback={<Table.Skeleton cols={columns.length} rows={4} />}
        emptyState={
          <Table.Cell colSpan={columns.length} className="h-24 text-center">
            No results.
          </Table.Cell>
        }
/>

interface DataTableProps<T> {
  table: TableType<T>;
  fallback: JSX.Element;
  emptyState: JSX.Element;
  loading?: boolean;
  onNext?: VoidFunction;
  onPrev?: VoidFunction;
}

export const DataTable = <T,>({
  table,
  loading,
  emptyState,
  fallback,
  onNext,
  onPrev,
}: DataTableProps<T>) => {
  return (
    <>
      <Table>
        <Table.Header>
          {table.getHeaderGroups().map(headerGroup => (
            <Table.Row key={headerGroup.id}>
              {headerGroup.headers.map(header => {
                return (
                  <Table.Head
                    onClick={header.column.getToggleSortingHandler()}
                    isSortable={header.column.getCanSort()}
                    order={header.column.getIsSorted()}
                    key={header.id}
                  >
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext(),
                        )}
                  </Table.Head>
                );
              })}
            </Table.Row>
          ))}
        </Table.Header>
        <Table.Body>
          {loading
            ? fallback
            : isEmpty(table.getRowModel().rows)
            ? emptyState
            : table.getRowModel().rows.map(row => (
                <Table.Row key={row.id}>
                  {row.getVisibleCells().map(cell => (
                    <Table.Cell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </Table.Cell>
                  ))}
                </Table.Row>
              ))}
        </Table.Body>
      </Table>
      <Table.Pagination
        currentPage={table.getState().pagination.pageIndex + 1}
        pageCount={table.getPageCount()}
        canNextPage={table.getCanNextPage()}
        canPreviousPage={table.getCanPreviousPage()}
        onPrev={callAll(table.previousPage, onPrev)}
        onNext={callAll(table.nextPage, onNext)}
      />
    </>
  );
};

export const TablePagination = ({
  currentPage,
  pageCount,
  canNextPage,
  canPreviousPage,
  onPrev,
  onNext,
}: Props) => {
  return (
    <div
      role="navigation"
      aria-label="pagination navigation"
      className="flex items-center justify-end space-x-2 p-4"
    >
      <span>
        Page{' '}
        <strong aria-label="page">
          {currentPage} of {Math.max(pageCount, 1)}
        </strong>
      </span>
      <div className="space-x-2">
        <Button
          aria-label="go to previous page"
          variant="outline"
          size="sm"
          onClick={onPrev}
          disabled={!canPreviousPage}
        >
          Previous
        </Button>
        <Button
          aria-label="go to next page"
          variant="outline"
          size="sm"
          onClick={onNext}
          disabled={!canNextPage}
        >
          Next
        </Button>
      </div>
    </div>
  );
};

[erfan-goodarzi]

What's the first commit?