@redsift/design-system-legacy 8.0.1 → 8.0.3

package/src/components/Table/Table.jsx

@@ -1,872 +0,0 @@
-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>
-  );
-};