@redsift/design-system-legacy 8.0.0 → 8.0.1

package/src/components/Table/Table.jsx

@@ -0,0 +1,872 @@
+import React, {
+  Fragment,
+  useState,
+  useEffect,
+  createRef,
+  useMemo,
+} from 'react';
+import {
+  useTable,
+  useSortBy,
+  usePagination,
+  useFilters,
+  useExpanded,
+} from "react-table";
+
+import { Checkbox } from '../Checkbox';
+import { Typography } from '../Typography';
+import { Pagination } from '../Pagination';
+import { Cross, DeleteIcon, SearchIcon, FilterList } from '../icons';
+import { useDebouncedValue } from '../../hooks/useDebouncedValue';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+import {
+  Container,
+  SortDownIcon,
+  SortUpIcon,
+  ActionIcon,
+  AddComponentContainer,
+  Search,
+  TableHeaderCell,
+  Header,
+  Row,
+  ActionBar,
+  Cell,
+  SortCell,
+  HeaderPrimaryContent,
+  StyledTable,
+  ExpandIcon,
+  TableBody,
+  TableContent,
+  TableHeaderSection,
+} from "./TableStyles";
+import {
+  BlankRows,
+  ClearSearchButton,
+  ActionButtons,
+  ButtonsRowContainer,
+  EditButton,
+  DeleteConfirmBanner,
+  SortButton,
+} from "./TableComponents";
+import { fuzzyTextFilterFn, DefaultColumnFilter } from "./TableFilters";
+import { ExportCSVButton } from "./ExportCSVButton";
+
+export const Table = ({
+  columns,
+  data,
+  footerRow,
+  title,
+  bordered,
+  rowSpacing,
+  sortableRows,
+  onSelectionChange,
+  onSearchChange = () => {},
+  onRowsLengthChange = () => {},
+  onPageSizeChange = () => {},
+  onPageChange = () => {},
+  onDelete,
+  onSort,
+  showDeleteColumn,
+  export: exportSettings,
+  defaultSorted,
+  defaultPageSize = 10,
+  searchID,
+  searchLabel,
+  checkboxProps,
+  inputProps,
+  selectHighlight,
+  staticPageSize,
+  noPagination,
+  color = "#000",
+  iconButtonsHoverColor = "#00000019",
+  iconButtonsActiveColor = "#00000032",
+  primaryButtonsHoverColor = "#222222",
+  primaryButtonsActiveColor = "#111111",
+  filterable,
+  CustomFilterButton,
+  sortable = true,
+  CustomActions,
+  AddComponent,
+  customOnEdit,
+  CustomSelectedActions,
+  CustomPrimaryActions,
+  CustomHeaderComponent,
+  rowSubComponent,
+  rowSubComponentEditMode,
+  xOverflow,
+  xOverflowBg,
+  locales = {},
+  smallTableButtonDesign = false,
+  onPreviousPage = () => {},
+  onNextPage = () => {},
+  gotoPageIndex = null,
+  onVisibleRowsChange = null,
+  onVisibleRowsChangeDebounceTime = null,
+  onChangeSortBy = null,
+  ...rest
+}) => {
+  const [selected, setSelected] = useState({});
+  const [selectAll, setSelectAll] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const [showAddComponent, setShowAddComponent] = useState(false);
+  const [search, setSearch] = useState("");
+  const [currentData, setCurrentData] = useState([]);
+  const [transformedFooterRow, setTransformedFooterRow] = useState();
+  const [placeholderHeight, setPlaceholderHeight] = useState();
+  const locale = (key, fallback) => locales[key] || fallback;
+
+  const { isMobile } = useIsMobile();
+  const displayCustomActionsBelowSearch = isMobile || smallTableButtonDesign;
+
+  // recalculate height of simplebar wrapper
+  // https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react#accessing-simplebar-instance
+  const ref = createRef();
+  useEffect(() => {
+    if (xOverflow && ref && ref.current) {
+      ref.current.recalculate();
+    }
+  }, [ref, xOverflow]);
+
+  useEffect(() => {
+    if (xOverflow && currentData.length) {
+      const content = document.querySelector(".simplebar-content");
+      setPlaceholderHeight(content.offsetHeight);
+    }
+  }, [currentData, xOverflow]);
+
+  const defaultColumn = useMemo(
+    () => ({
+      Filter: DefaultColumnFilter,
+    }),
+    []
+  );
+
+  const filterTypes = useMemo(
+    () => ({
+      // Add a new fuzzyTextFilterFn filter type.
+      fuzzyText: fuzzyTextFilterFn,
+      // override the default text filter to use "startWith"
+      text: (rows, id, filterValue) => {
+        return rows.filter((row) => {
+          const rowValue = row.values[id];
+          return rowValue !== undefined
+            ? String(rowValue)
+                .toLowerCase()
+                .startsWith(String(filterValue).toLowerCase())
+            : true;
+        });
+      },
+    }),
+    []
+  );
+
+  // for xOverflow:
+  const isFirstCell = (itemSize, idx, xOverflow) => {
+    if (idx === 0 && xOverflow) {
+      return xOverflow;
+    }
+    return itemSize;
+  };
+  const isLastCell = (itemCount, idx, xOverflow) => {
+    if (itemCount - 1 === idx && xOverflow) {
+      return true;
+    }
+  };
+
+  useEffect(() => {
+    onSearchChange(search);
+  }, [search]);
+
+  useEffect(() => {
+    if (!searchID || !search) {
+      return setCurrentData(data);
+    }
+    const newData = data.filter(
+      (item) =>
+        item[searchID] &&
+        item[searchID].toLowerCase().includes(search.toLowerCase())
+    );
+    setCurrentData(newData);
+  }, [data, searchID, search]);
+
+  useEffect(() => {
+    if (!footerRow) {
+      return setTransformedFooterRow(null);
+    }
+    setTransformedFooterRow({
+      values: footerRow,
+      original: {
+        _isFooter: true,
+        _noSelect: true,
+        CustomNoSelect: () => null,
+      },
+    });
+  }, [footerRow]);
+
+  const useTableData = {
+    columns,
+    data: currentData,
+    defaultColumn,
+    filterTypes,
+    initialState: {
+      pageSize: defaultPageSize,
+    },
+  };
+
+  if (defaultSorted) {
+    useTableData.initialState = {
+      ...useTableData.initialState,
+      sortBy: defaultSorted,
+    };
+  }
+
+  const instance = useTable(
+    useTableData,
+    useFilters,
+    useSortBy,
+    useExpanded,
+    usePagination
+  );
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    rows,
+    state: { pageIndex, pageSize },
+    canPreviousPage,
+    canNextPage,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    page,
+    pageOptions,
+  } = instance;
+
+  const [debouncedRows] = useDebouncedValue(
+    noPagination ? rows : page,
+    onVisibleRowsChangeDebounceTime
+  );
+
+  useEffect(() => {
+    if (onVisibleRowsChange !== null) {
+      onVisibleRowsChange(debouncedRows);
+    }
+  }, [debouncedRows]);
+
+  useEffect(() => {
+    if (gotoPageIndex !== null) {
+      gotoPage(gotoPageIndex);
+    }
+  }, [gotoPageIndex, pageIndex]);
+
+  useEffect(() => {
+    if (staticPageSize) {
+      setPageSize(staticPageSize);
+    }
+  }, [staticPageSize, setPageSize]);
+
+  useEffect(() => {
+    onPageSizeChange(pageSize);
+  }, [pageSize]);
+
+  useEffect(() => {
+    onPageChange(pageIndex);
+  }, [pageIndex]);
+
+  useEffect(() => {
+    if (xOverflow) {
+      const content = document.querySelector(".simplebar-content");
+      setPlaceholderHeight(content.offsetHeight);
+    }
+  }, [xOverflow, pageSize]);
+
+  useEffect(() => {
+    onRowsLengthChange(rows.length);
+  }, [rows.length, onRowsLengthChange]);
+
+  const getSelectedList = (state = selected) => {
+    const list = [];
+    Object.keys(state).forEach((key) => {
+      if (state[key]) {
+        list.push(key);
+      }
+    });
+    return list;
+  };
+
+  const handleDeleteSelected = () => {
+    onDelete(getSelectedList());
+    setDeleteConfirm(false);
+    setSelectAll(false);
+    setSelected({});
+  };
+
+  const handleSortGeneric = (action, row) => {
+    const newData = [...currentData];
+    const index = parseInt(row.id);
+
+    if (action === "increment" && index > 0) {
+      const firstRow = newData[index];
+      const lastRow = newData[index - 1];
+      newData.splice(index - 1, 2, firstRow, lastRow);
+    }
+
+    if (action === "decrement" && index < newData.length - 1) {
+      const firstRow = newData[index];
+      const lastRow = newData[index + 1];
+      newData.splice(index, 2, lastRow, firstRow);
+    }
+    setCurrentData(newData);
+  };
+
+  const returnSelectedList = (newState) => {
+    onSelectionChange(getSelectedList(newState));
+  };
+
+  const handleSelectAll = () => {
+    const newState = {};
+    page.forEach((row) => {
+      if ("_id" in row.original && !row.original._noSelect) {
+        const { _id } = row.original;
+        newState[_id] = !selectAll;
+      }
+    });
+    setSelected(newState);
+    setSelectAll(!selectAll);
+    returnSelectedList(newState);
+  };
+
+  const handleOnSelectionChange = (row) => {
+    if (!("_id" in row.original)) {
+      return;
+    }
+    const { _id } = row.original;
+    const newState = { ...selected, [_id]: !selected[_id] };
+    if (selected[_id] && selectAll) {
+      setSelectAll(false);
+    } else {
+      let allSelected = true;
+      page.forEach((row) => {
+        if ("_id" in row.original && !row.original._noSelect) {
+          const { _id } = row.original;
+          if (!newState[_id]) {
+            allSelected = false;
+            return;
+          }
+        }
+      });
+      if (allSelected) {
+        setSelectAll(true);
+      }
+    }
+    setSelected(newState);
+    returnSelectedList(newState);
+  };
+
+  const selectedList = getSelectedList();
+
+  const handleClearSearch = () => {
+    setSearch("");
+  };
+
+  const itemsSelected = Boolean(selectedList.length);
+
+  useEffect(() => {
+    if (itemsSelected && showAddComponent) {
+      setShowAddComponent(false);
+    }
+  }, [selected.length]);
+
+  // if data gets updated, check if every selected item is still on the data set
+  useEffect(() => {
+    const newSelected = { ...selected };
+    for (const selectedListElement of selectedList) {
+      const doesItemStillExists = currentData.find(
+        (item) =>
+          "_id" in item &&
+          !item._noSelect &&
+          item._id.toString() === selectedListElement
+      );
+      if (!doesItemStillExists) {
+        newSelected[selectedListElement] = false;
+      }
+    }
+    setSelected(newSelected);
+  }, [currentData]);
+
+  useEffect(() => {
+    const existingIds = [];
+    for (const row of page) {
+      if ("_id" in row.original && !row.original._noSelect) {
+        existingIds.push(row.original._id);
+      }
+    }
+    if (existingIds.length) {
+      let shouldSelectAll = true;
+      for (const id of existingIds) {
+        if (!selected[id]) {
+          shouldSelectAll = false;
+          break;
+        }
+      }
+      setSelectAll(shouldSelectAll);
+    }
+  }, [page]);
+
+  const editRowEnabled = rowSubComponentEditMode && rowSubComponent;
+
+  return (
+    <Container>
+      {(title || filterable || exportSettings || CustomActions) && (
+        <Header>
+          <HeaderPrimaryContent>
+            <Typography size="h3" component="h3">
+              {title}
+            </Typography>
+          </HeaderPrimaryContent>
+          <ActionBar>
+            {filterable &&
+              (CustomFilterButton ? (
+                <CustomFilterButton
+                  onClick={() => setShowFilter(!showFilter)}
+                />
+              ) : (
+                <ActionIcon
+                  title={locale("filter-rows", "Filter rows")}
+                  aria-label={locale("filter-rows", "Filter rows")}
+                  label={locale("filter-rows", "Filter rows")}
+                  onClick={() => setShowFilter(!showFilter)}
+                  hoverColor={iconButtonsHoverColor}
+                  activeColor={iconButtonsActiveColor}
+                  icon={FilterList}
+                />
+              ))}
+            {exportSettings && (
+              <ExportCSVButton
+                locale={locale}
+                data={data}
+                filename={exportSettings.filename}
+                headers={exportSettings.headers}
+                hoverColor={iconButtonsHoverColor}
+                activeColor={iconButtonsActiveColor}
+                {...exportSettings}
+              />
+            )}
+            {CustomActions && <CustomActions />}
+          </ActionBar>
+        </Header>
+      )}
+      {(searchID ||
+        CustomPrimaryActions ||
+        AddComponent ||
+        (itemsSelected && (CustomSelectedActions || onDelete))) && (
+        <Header>
+          {searchID && (
+            <Search
+              expand={displayCustomActionsBelowSearch}
+              color={color}
+              {...inputProps}
+              leftIcon={<SearchIcon title={locale("search", "Search")} />}
+              rightIcon={
+                search &&
+                search.length && (
+                  <ClearSearchButton handleClearSearch={handleClearSearch} />
+                )
+              }
+              label={searchLabel || locale("search", "Search")}
+              value={search}
+              onChange={(ev) => setSearch(ev.target.value)}
+            />
+          )}
+          {(CustomPrimaryActions ||
+            (!itemsSelected && AddComponent && !showAddComponent) ||
+            (itemsSelected && (CustomSelectedActions || onDelete))) && (
+            <ActionBar>
+              {CustomPrimaryActions && <CustomPrimaryActions />}
+              {itemsSelected && [
+                CustomSelectedActions && <CustomSelectedActions />,
+                onDelete && (
+                  <ActionIcon
+                    title={locale("delete", "Deletex")}
+                    aria-label={locale("delete", "Delete")}
+                    label={locale("delete", "Delete")}
+                    onClick={() => setDeleteConfirm(true)}
+                    flatIcon={false}
+                    hoverColor={iconButtonsHoverColor}
+                    activeColor={iconButtonsActiveColor}
+                    outlined
+                    color={color}
+                    icon={DeleteIcon}
+                    useMobileLayout={isMobile}
+                  />
+                ),
+              ]}
+              {AddComponent && !showAddComponent && !itemsSelected && (
+                <ActionIcon
+                  title={locale("add", "Add")}
+                  aria-label={locale("add", "Add")}
+                  label={locale("add", "Add")}
+                  onClick={() => setShowAddComponent(!showAddComponent)}
+                  icon={(props) => (
+                    <Cross rotation="45deg" width={13} {...props} />
+                  )}
+                  flatIcon={false}
+                  hoverColor={primaryButtonsHoverColor}
+                  activeColor={primaryButtonsActiveColor}
+                  color={color}
+                  flexed={isMobile}
+                />
+              )}
+            </ActionBar>
+          )}
+        </Header>
+      )}
+      {CustomHeaderComponent && <CustomHeaderComponent />}
+      {showAddComponent && AddComponent && (
+        <AddComponentContainer>
+          <AddComponent closeAddComponent={() => setShowAddComponent(false)} />
+        </AddComponentContainer>
+      )}
+      {deleteConfirm && (
+        <DeleteConfirmBanner
+          locales={locales}
+          color={color}
+          onDelete={handleDeleteSelected}
+          onCancel={() => setDeleteConfirm(false)}
+        />
+      )}
+      <StyledTable
+        selectHighlight={selectHighlight}
+        xOverflow={xOverflow}
+        bordered={bordered}
+        {...getTableProps()}
+        {...rest}
+      >
+        <TableContent
+          ref={ref}
+          xOverflow={xOverflow}
+          placeholderHeight={placeholderHeight}
+        >
+          <TableHeaderSection
+            role="rowgroup"
+            bordered={bordered}
+            xOverflow={xOverflow}
+          >
+            {headerGroups.map((headerGroup, i) => (
+              <Row
+                role="row"
+                key={`header-row-${i}`}
+                header
+                bordered={bordered}
+                xOverflow={xOverflow}
+                {...headerGroup.getHeaderGroupProps()}
+              >
+                {onSelectionChange && (
+                  <TableHeaderCell role="columnheader" checkbox size={50}>
+                    <Checkbox
+                      dashed={!selectAll && selectedList.length}
+                      {...checkboxProps}
+                      hideLabel
+                      checked={selectAll || selectedList.length}
+                      onChange={handleSelectAll}
+                    >
+                      Select all
+                    </Checkbox>
+                  </TableHeaderCell>
+                )}
+                {headerGroup.headers.map((column, idx) => {
+                  return (
+                    <TableHeaderCell
+                      role="columnheader"
+                      key={`header-row-${i}-content-${idx}`}
+                      enableFlex={!xOverflow}
+                      stickyCell={idx === 0 && xOverflow}
+                      stickyCellNext={idx === 1 && xOverflow}
+                      size={isFirstCell(column.size, idx, xOverflow)}
+                      lastCell={isLastCell(
+                        headerGroup.headers.length,
+                        idx,
+                        xOverflow
+                      )}
+                      sortIconVisible={column.isSorted}
+                      justifyStart={column.disableFilters && showFilter}
+                      xOverflowBg={xOverflowBg}
+                      {...column.getHeaderProps()}
+                    >
+                      {sortable ? (
+                        <div
+                          {...{
+                            ...column.getSortByToggleProps(),
+                            onClick: (...args) => {
+                              onChangeSortBy &&
+                                onChangeSortBy({
+                                  isSorted: column.isSorted,
+                                  isSortedDesc: column.isSortedDesc,
+                                  columnId: column.id,
+                                });
+                              column.getSortByToggleProps().onClick(...args);
+                            },
+                            title: `${locale(
+                              "sort-by",
+                              "Sort by"
+                            )} ${(typeof column.Header == "string"
+                              ? column.Header
+                              : column.id || column.accessor
+                            ).toLowerCase()}`,
+                          }}
+                        >
+                          {column.render("Header")}
+                          {column.canSort && (
+                            <span className="sort-icon">
+                              {column.isSorted ? (
+                                column.isSortedDesc ? (
+                                  <SortDownIcon />
+                                ) : (
+                                  <SortUpIcon />
+                                )
+                              ) : (
+                                <SortUpIcon />
+                              )}
+                            </span>
+                          )}
+                        </div>
+                      ) : (
+                        column.render("Header")
+                      )}
+
+                      {showFilter && column.canFilter && (
+                        <div style={{ width: "100%", marginBottom: "10px" }}>
+                          {column.render("Filter")}
+                        </div>
+                      )}
+                    </TableHeaderCell>
+                  );
+                })}
+                {editRowEnabled || (onDelete && showDeleteColumn) ? (
+                  <TableHeaderCell
+                    role="columnheader"
+                    size={
+                      rowSubComponentEditMode &&
+                      rowSubComponent &&
+                      showDeleteColumn &&
+                      onDelete
+                        ? 90
+                        : 80
+                    }
+                  >
+                    Actions
+                  </TableHeaderCell>
+                ) : null}
+                {rowSubComponent && !editRowEnabled && (
+                  <TableHeaderCell role="columnheader" noPadding size={40} />
+                )}
+              </Row>
+            ))}
+          </TableHeaderSection>
+          <TableBody
+            role="rowgroup"
+            {...getTableBodyProps()}
+            xOverflow={xOverflow}
+          >
+            {[
+              ...(noPagination ? rows : page),
+              ...(transformedFooterRow ? [transformedFooterRow] : []),
+            ].map((row, rowIdx) => {
+              const {
+                original: {
+                  _noSelect,
+                  _customRowColor,
+                  _id,
+                  _isFooter,
+                  _onClick,
+                  CustomNoSelect,
+                },
+              } = row;
+              return (
+                prepareRow(row) || (
+                  <Fragment key={`row-${rowIdx}`}>
+                    <Row
+                      role="row"
+                      bordered={bordered}
+                      rowSpacing={rowSpacing}
+                      selected={selected[row.original._id]}
+                      selectHighlight={selectHighlight}
+                      rowColor={_isFooter ? undefined : _customRowColor}
+                      isFooter={_isFooter}
+                      xOverflow={xOverflow}
+                      {...row.getRowProps()}
+                    >
+                      {sortableRows && (
+                        <SortCell role="cell" size={25}>
+                          <SortButton
+                            action="increment"
+                            onSort={onSort ? onSort : handleSortGeneric}
+                            row={row}
+                            rowSpacing={rowSpacing}
+                          />
+                          <SortButton
+                            action="decrement"
+                            onSort={onSort ? onSort : handleSortGeneric}
+                            row={row}
+                            rowSpacing={rowSpacing}
+                          />
+                        </SortCell>
+                      )}
+                      {onSelectionChange && (
+                        <Cell
+                          role="cell"
+                          rowSpacing={rowSpacing}
+                          checkbox
+                          size={50}
+                        >
+                          {CustomNoSelect && _noSelect ? (
+                            <CustomNoSelect />
+                          ) : (
+                            <Checkbox
+                              {...checkboxProps}
+                              hideLabel
+                              checked={selected[_id]}
+                              disabled={_noSelect}
+                              onChange={() => handleOnSelectionChange(row)}
+                            >
+                              {locales["select"] || "Select"}
+                            </Checkbox>
+                          )}
+                        </Cell>
+                      )}
+                      {row.cells.map((cell, cellIdx) => {
+                        const cellSize = isFirstCell(
+                          cell.column.size,
+                          cellIdx,
+                          xOverflow
+                        );
+                        const lastCell = isLastCell(
+                          row.cells.length,
+                          cellIdx,
+                          xOverflow
+                        );
+                        return (
+                          <Cell
+                            role="cell"
+                            onClick={_onClick}
+                            key={cell.value}
+                            enableFlex={!xOverflow}
+                            stickyCell={cellIdx === 0 && xOverflow}
+                            stickyCellNext={cellIdx === 1 && xOverflow}
+                            xOverflow={xOverflow}
+                            size={cellSize}
+                            lastCell={lastCell}
+                            isNumber={cell.column.isNumber}
+                            xOverflowBg={xOverflowBg}
+                            ellipsisOverflow={["string", "number"].includes(
+                              typeof cell.value
+                            )}
+                            {...cell.getCellProps()}
+                          >
+                            {cell.value || cell.column.isNumber
+                              ? cell.render(_isFooter ? "Footer" : "Cell")
+                              : ""}
+                          </Cell>
+                        );
+                      })}
+                      {(editRowEnabled || (showDeleteColumn && onDelete)) && (
+                        <ButtonsRowContainer
+                          size={
+                            editRowEnabled && showDeleteColumn && onDelete
+                              ? 90
+                              : 80
+                          }
+                        >
+                          {!_noSelect && showDeleteColumn && onDelete ? (
+                            <ActionButtons
+                              locales={locales}
+                              onDelete={onDelete}
+                              disabled={_noSelect}
+                              row={row}
+                              customOnEdit={customOnEdit}
+                              hoverColor={iconButtonsHoverColor}
+                              activeColor={iconButtonsActiveColor}
+                              editButtonProps={
+                                editRowEnabled &&
+                                row.getToggleRowExpandedProps()
+                              }
+                            />
+                          ) : (
+                            !_noSelect &&
+                            editRowEnabled && (
+                              <EditButton
+                                title={locales["edit"] || "Edit"}
+                                row={row}
+                                customOnEdit={customOnEdit}
+                                {...row.getToggleRowExpandedProps()}
+                              />
+                            )
+                          )}
+                        </ButtonsRowContainer>
+                      )}
+                      {rowSubComponent && !editRowEnabled && (
+                        <Cell
+                          role="cell"
+                          noPadding
+                          size={40}
+                          {...row.getToggleRowExpandedProps()}
+                        >
+                          <ExpandIcon expanded={row.isExpanded || undefined} />
+                        </Cell>
+                      )}
+                    </Row>
+                    {row.isExpanded ? (
+                      <div>{rowSubComponent({ row })}</div>
+                    ) : null}
+                  </Fragment>
+                )
+              );
+            })}
+            <BlankRows
+              onDelete={onDelete}
+              showDeleteColumn={showDeleteColumn}
+              onSelectionChange={onSelectionChange}
+              staticPageSize={staticPageSize}
+              noPagination={noPagination}
+              rows={rows}
+              page={page}
+              bordered={bordered}
+              headerGroups={headerGroups}
+              editRowEnabled={editRowEnabled}
+              rowSubComponent={rowSubComponent}
+            />
+          </TableBody>
+        </TableContent>
+      </StyledTable>
+      {!noPagination && (
+        <Pagination
+          totalEntries={rows.length}
+          gotoPage={gotoPage}
+          nextPage={() => {
+            onNextPage(pageIndex + 1);
+            nextPage();
+          }}
+          previousPage={() => {
+            onPreviousPage(pageIndex - 1);
+            previousPage();
+          }}
+          pageCount={pageOptions.length}
+          staticPageSize={staticPageSize}
+          setPageSize={setPageSize}
+          pageSize={pageSize}
+          pageIndex={pageIndex}
+          canNextPage={canNextPage}
+          color={color}
+          canPreviousPage={canPreviousPage}
+          pageSizeOptions={[10, 20, 30, 40, 50]}
+          locales={locales}
+        />
+      )}
+    </Container>
+  );
+};