material-react-table-narender 1.0.0 → 2.13.4

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -0,0 +1,241 @@
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Pagination, { type PaginationProps } from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import Select, { type SelectProps } from '@mui/material/Select';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { flipIconStyles, getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
+
+export interface MRT_TablePaginationProps<TData extends MRT_RowData>
+  extends Partial<
+    PaginationProps & {
+      SelectProps?: Partial<SelectProps>;
+      disabled?: boolean;
+      rowsPerPageOptions?: { label: string; value: number }[] | number[];
+      showRowsPerPage?: boolean;
+    }
+  > {
+  position?: 'bottom' | 'top';
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TablePagination = <TData extends MRT_RowData>({
+  position = 'bottom',
+  table,
+  ...rest
+}: MRT_TablePaginationProps<TData>) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width: 720px)');
+
+  const {
+    getState,
+    options: {
+      enableToolbarInternalActions,
+      icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
+      localization,
+      muiPaginationProps,
+      paginationDisplayMode,
+    },
+  } = table;
+  const {
+    pagination: { pageIndex = 0, pageSize = 10 },
+    showGlobalFilter,
+  } = getState();
+
+  const paginationProps = {
+    ...parseFromValuesOrFunc(muiPaginationProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const totalRowCount = table.getRowCount();
+  const numberOfPages = table.getPageCount();
+  const showFirstLastPageButtons = numberOfPages > 2;
+  const firstRowIndex = pageIndex * pageSize;
+  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+
+  const {
+    SelectProps = {},
+    disabled = false,
+    rowsPerPageOptions = defaultRowsPerPage,
+    showFirstButton = showFirstLastPageButtons,
+    showLastButton = showFirstLastPageButtons,
+    showRowsPerPage = true,
+    ...restPaginationProps
+  } = paginationProps ?? {};
+
+  const disableBack = pageIndex <= 0 || disabled;
+  const disableNext = lastRowIndex >= totalRowCount || disabled;
+
+  if (isMobile && SelectProps?.native !== false) {
+    SelectProps.native = true;
+  }
+
+  const tooltipProps = getCommonTooltipProps();
+
+  return (
+    <Box
+      className="MuiTablePagination-root"
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '8px',
+        justifyContent: { md: 'space-between', sm: 'center' },
+        justifySelf: 'flex-end',
+        mt:
+          position === 'top' &&
+          enableToolbarInternalActions &&
+          !showGlobalFilter
+            ? '3rem'
+            : undefined,
+        position: 'relative',
+        px: '8px',
+        py: '12px',
+        zIndex: 2,
+      }}
+    >
+      {showRowsPerPage && (
+        <Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
+          <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
+            {localization.rowsPerPage}
+          </InputLabel>
+          <Select
+            MenuProps={{ disableScrollLock: true }}
+            disableUnderline
+            disabled={disabled}
+            inputProps={{
+              'aria-label': localization.rowsPerPage,
+              id: 'mrt-rows-per-page',
+            }}
+            label={localization.rowsPerPage}
+            onChange={(event) =>
+              table.setPageSize(+(event.target.value as any))
+            }
+            sx={{ mb: 0 }}
+            value={pageSize}
+            variant="standard"
+            {...SelectProps}
+          >
+            {rowsPerPageOptions.map((option) => {
+              const value = typeof option !== 'number' ? option.value : option;
+              const label =
+                typeof option !== 'number' ? option.label : `${option}`;
+              return (
+                SelectProps?.children ??
+                (SelectProps?.native ? (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ) : (
+                  <MenuItem key={value} sx={{ m: 0 }} value={value}>
+                    {label}
+                  </MenuItem>
+                ))
+              );
+            })}
+          </Select>
+        </Box>
+      )}
+      {paginationDisplayMode === 'pages' ? (
+        <Pagination
+          count={numberOfPages}
+          disabled={disabled}
+          onChange={(_e, newPageIndex) => table.setPageIndex(newPageIndex - 1)}
+          page={pageIndex + 1}
+          renderItem={(item) => (
+            <PaginationItem
+              slots={{
+                first: FirstPageIcon,
+                last: LastPageIcon,
+                next: ChevronRightIcon,
+                previous: ChevronLeftIcon,
+              }}
+              {...item}
+            />
+          )}
+          showFirstButton={showFirstButton}
+          showLastButton={showLastButton}
+          {...restPaginationProps}
+        />
+      ) : paginationDisplayMode === 'default' ? (
+        <>
+          <Typography
+            align="center"
+            component="span"
+            sx={{ m: '0 4px', minWidth: '8ch' }}
+            variant="body2"
+          >{`${
+            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+          }-${lastRowIndex.toLocaleString()} ${
+            localization.of
+          } ${totalRowCount.toLocaleString()}`}</Typography>
+          <Box gap="xs">
+            {showFirstButton && (
+              <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToFirstPage}
+                    disabled={disableBack}
+                    onClick={() => table.firstPage()}
+                    size="small"
+                  >
+                    <FirstPageIcon {...flipIconStyles(theme)} />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            )}
+            <Tooltip {...tooltipProps} title={localization.goToPreviousPage}>
+              <span>
+                <IconButton
+                  aria-label={localization.goToPreviousPage}
+                  disabled={disableBack}
+                  onClick={() => table.previousPage()}
+                  size="small"
+                >
+                  <ChevronLeftIcon {...flipIconStyles(theme)} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Tooltip {...tooltipProps} title={localization.goToNextPage}>
+              <span>
+                <IconButton
+                  aria-label={localization.goToNextPage}
+                  disabled={disableNext}
+                  onClick={() => table.nextPage()}
+                  size="small"
+                >
+                  <ChevronRightIcon {...flipIconStyles(theme)} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            {showLastButton && (
+              <Tooltip {...tooltipProps} title={localization.goToLastPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToLastPage}
+                    disabled={disableNext}
+                    onClick={() => table.lastPage()}
+                    size="small"
+                  >
+                    <LastPageIcon {...flipIconStyles(theme)} />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            )}
+          </Box>
+        </>
+      ) : null}
+    </Box>
+  );
+};

package/src/fns/filterFns.ts

@@ -0,0 +1,188 @@
+import {
+  type RankingInfo,
+  rankItem,
+  rankings,
+} from '@tanstack/match-sorter-utils';
+import { type Row, filterFns } from '@tanstack/react-table';
+import { type MRT_RowData } from '../types';
+
+const fuzzy = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: number | string,
+  addMeta: (item: RankingInfo) => void,
+) => {
+  const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
+    threshold: rankings.MATCHES,
+  });
+  addMeta(itemRank);
+  return itemRank.passed;
+};
+
+fuzzy.autoRemove = (val: any) => !val;
+
+const contains = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  row
+    .getValue<number | string>(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .includes(filterValue.toString().toLowerCase().trim());
+
+contains.autoRemove = (val: any) => !val;
+
+const startsWith = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  row
+    .getValue<number | string>(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .startsWith(filterValue.toString().toLowerCase().trim());
+
+startsWith.autoRemove = (val: any) => !val;
+
+const endsWith = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  row
+    .getValue<number | string>(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .endsWith(filterValue.toString().toLowerCase().trim());
+
+endsWith.autoRemove = (val: any) => !val;
+
+const equals = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  row.getValue<number | string>(id).toString().toLowerCase().trim() ===
+  filterValue?.toString().toLowerCase().trim();
+
+equals.autoRemove = (val: any) => !val;
+
+const notEquals = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  row.getValue<number | string>(id).toString().toLowerCase().trim() !==
+  filterValue.toString().toLowerCase().trim();
+
+notEquals.autoRemove = (val: any) => !val;
+
+const greaterThan = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) > +filterValue
+    : row.getValue<number | string>(id).toString().toLowerCase().trim() >
+      filterValue?.toString().toLowerCase().trim();
+
+greaterThan.autoRemove = (val: any) => !val;
+
+const greaterThanOrEqualTo = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+
+greaterThanOrEqualTo.autoRemove = (val: any) => !val;
+
+const lessThan = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) < +filterValue
+    : row.getValue<number | string>(id).toString().toLowerCase().trim() <
+      filterValue?.toString().toLowerCase().trim();
+
+lessThan.autoRemove = (val: any) => !val;
+
+const lessThanOrEqualTo = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+
+lessThanOrEqualTo.autoRemove = (val: any) => !val;
+
+const between = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValues: [number | string, number | string],
+) =>
+  ((['', undefined] as any[]).includes(filterValues[0]) ||
+    greaterThan(row, id, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) &&
+    !isNaN(+filterValues[1]) &&
+    +filterValues[0] > +filterValues[1]) ||
+    (['', undefined] as any[]).includes(filterValues[1]) ||
+    lessThan(row, id, filterValues[1]));
+
+between.autoRemove = (val: any) => !val;
+
+const betweenInclusive = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValues: [number | string, number | string],
+) =>
+  ((['', undefined] as any[]).includes(filterValues[0]) ||
+    greaterThanOrEqualTo(row, id, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) &&
+    !isNaN(+filterValues[1]) &&
+    +filterValues[0] > +filterValues[1]) ||
+    (['', undefined] as any[]).includes(filterValues[1]) ||
+    lessThanOrEqualTo(row, id, filterValues[1]));
+
+betweenInclusive.autoRemove = (val: any) => !val;
+
+const empty = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  _filterValue: number | string,
+) => !row.getValue<number | string>(id).toString().trim();
+
+empty.autoRemove = (val: any) => !val;
+
+const notEmpty = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  _filterValue: number | string,
+) => !!row.getValue<number | string>(id).toString().trim();
+
+notEmpty.autoRemove = (val: any) => !val;
+
+export const MRT_FilterFns = {
+  ...filterFns,
+  between,
+  betweenInclusive,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  greaterThanOrEqualTo,
+  lessThan,
+  lessThanOrEqualTo,
+  notEmpty,
+  notEquals,
+  startsWith,
+};

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -0,0 +1,29 @@
+import { type RefObject } from 'react';
+import { MRT_TableBodyRowGrabHandle } from '../../components/body/MRT_TableBodyRowGrabHandle';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> => {
+  return {
+    Cell: ({ row, rowRef, table }) => (
+      <MRT_TableBodyRowGrabHandle
+        row={row}
+        rowRef={rowRef as RefObject<HTMLTableRowElement>}
+        table={table}
+      />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'move',
+      id: 'mrt-row-drag',
+      size: 60,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/useMRT_Effects.ts

@@ -0,0 +1,103 @@
+import { useEffect, useReducer, useRef } from 'react';
+import {
+  type MRT_RowData,
+  type MRT_SortingState,
+  type MRT_TableInstance,
+} from '../types';
+import { getDefaultColumnOrderIds } from '../utils/displayColumn.utils';
+import { getCanRankRows } from '../utils/row.utils';
+
+export const useMRT_Effects = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const {
+    getIsSomeRowsPinned,
+    getPrePaginationRowModel,
+    getState,
+    options: { enablePagination, enableRowPinning, rowCount },
+  } = table;
+  const {
+    columnOrder,
+    density,
+    globalFilter,
+    isFullScreen,
+    isLoading,
+    pagination,
+    showSkeletons,
+    sorting,
+  } = getState();
+
+  const totalColumnCount = table.options.columns.length;
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+
+  const rerender = useReducer(() => ({}), {})[1];
+  const initialBodyHeight = useRef<string>();
+  const previousTop = useRef<number>();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      initialBodyHeight.current = document.body.style.height;
+    }
+  }, []);
+
+  //hide scrollbars when table is in full screen mode, preserve body scroll position after full screen exit
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (isFullScreen) {
+        previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
+        document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
+      } else {
+        document.body.style.height = initialBodyHeight.current as string;
+        if (!previousTop.current) return;
+        //restore scroll position
+        window.scrollTo({
+          behavior: 'instant',
+          top: -1 * (previousTop.current as number),
+        });
+      }
+    }
+  }, [isFullScreen]);
+
+  //recalculate column order when columns change or features are toggled on/off
+  useEffect(() => {
+    if (totalColumnCount !== columnOrder.length) {
+      table.setColumnOrder(getDefaultColumnOrderIds(table.options));
+    }
+  }, [totalColumnCount]);
+
+  //if page index is out of bounds, set it to the last page
+  useEffect(() => {
+    if (!enablePagination || isLoading || showSkeletons) return;
+    const { pageIndex, pageSize } = pagination;
+    const firstVisibleRowIndex = pageIndex * pageSize;
+    if (firstVisibleRowIndex >= totalRowCount) {
+      table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
+    }
+  }, [totalRowCount]);
+
+  //turn off sort when global filter is looking for ranked results
+  const appliedSort = useRef<MRT_SortingState>(sorting);
+  useEffect(() => {
+    if (sorting.length) {
+      appliedSort.current = sorting;
+    }
+  }, [sorting]);
+
+  useEffect(() => {
+    if (!getCanRankRows(table)) return;
+    if (globalFilter) {
+      table.setSorting([]);
+    } else {
+      table.setSorting(() => appliedSort.current || []);
+    }
+  }, [globalFilter]);
+
+  //fix pinned row top style when density changes
+  useEffect(() => {
+    if (enableRowPinning && getIsSomeRowsPinned()) {
+      setTimeout(() => {
+        rerender();
+      }, 150);
+    }
+  }, [density]);
+};