@cutting/material-react-table 4.0.0

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -0,0 +1,184 @@
+import Alert, { type AlertProps } from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Collapse from '@mui/material/Collapse';
+import Stack from '@mui/material/Stack';
+import { Fragment, useMemo } from 'react';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRT_SelectAllHandler } from '../../utils/row.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
+
+export interface MRT_ToolbarAlertBannerProps<TData extends MRT_RowData>
+  extends AlertProps {
+  stackAlertBanner?: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
+  stackAlertBanner,
+  table,
+  ...rest
+}: MRT_ToolbarAlertBannerProps<TData>) => {
+  const {
+    getCoreRowModel,
+    getFilteredSelectedRowModel,
+    getState,
+    options: {
+      enableRowSelection,
+      enableSelectAll,
+      localization,
+      manualPagination,
+      muiToolbarAlertBannerChipProps,
+      muiToolbarAlertBannerProps,
+      positionToolbarAlertBanner,
+      renderToolbarAlertBannerContent,
+      rowCount,
+    },
+    refs: { tablePaperRef },
+  } = table;
+  const { density, grouping, rowSelection, showAlertBanner } = getState();
+
+  const alertProps = {
+    ...parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
+    table,
+  });
+
+  const totalRowCount = rowCount ?? getCoreRowModel().rows.length;
+  const filteredRowCount = getFilteredSelectedRowModel().rows.length;
+
+  const selectedRowCount = useMemo(
+    () =>
+      manualPagination
+        ? Object.values(rowSelection).filter(Boolean).length
+        : filteredRowCount,
+    [rowSelection, totalRowCount, manualPagination, filteredRowCount],
+  );
+  const selectedAlert =
+    selectedRowCount > 0 ? (
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: "center",
+          gap: "16px"
+        }}>
+        {localization.selectedCountOfRowCountRowsSelected
+          ?.replace(
+            '{selectedCount}',
+            selectedRowCount.toLocaleString(localization.language),
+          )
+          ?.replace(
+            '{rowCount}',
+            totalRowCount.toLocaleString(localization.language),
+          )}
+        <Button
+          onClick={(event) =>
+            getMRT_SelectAllHandler({ table })(event, false, true)
+          }
+          size="small"
+          sx={{ p: '2px' }}
+        >
+          {localization.clearSelection}
+        </Button>
+      </Stack>
+    ) : null;
+
+  const groupedAlert =
+    grouping.length > 0 ? (
+      <span>
+        {localization.groupedBy}{' '}
+        {grouping.map((columnId, index) => (
+          <Fragment key={`${index}-${columnId}`}>
+            {index > 0 ? localization.thenBy : ''}
+            <Chip
+              label={table.getColumn(columnId).columnDef.header}
+              onDelete={() => table.getColumn(columnId).toggleGrouping()}
+              {...chipProps}
+            />
+          </Fragment>
+        ))}
+      </span>
+    ) : null;
+
+  return (
+    <Collapse
+      in={showAlertBanner || !!selectedAlert || !!groupedAlert}
+      timeout={stackAlertBanner ? 200 : 0}
+    >
+      <Alert
+        color="info"
+        icon={false}
+        {...alertProps}
+        sx={(theme) => ({
+          '& .MuiAlert-message': {
+            maxWidth: `calc(${
+              tablePaperRef.current?.clientWidth ?? 360
+            }px - 1rem)`,
+            width: '100%',
+          },
+          borderRadius: 0,
+          fontSize: '1rem',
+          left: 0,
+          mb: stackAlertBanner
+            ? 0
+            : positionToolbarAlertBanner === 'bottom'
+              ? '-1rem'
+              : undefined,
+          p: 0,
+          position: 'relative',
+          right: 0,
+          top: 0,
+          width: '100%',
+          zIndex: 2,
+          ...(parseFromValuesOrFunc(alertProps?.sx, theme) as any),
+        })}
+      >
+        {renderToolbarAlertBannerContent?.({
+          groupedAlert,
+          selectedAlert,
+          table,
+        }) ?? (
+          <>
+            {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
+            <Stack
+              sx={{
+                p:
+                  positionToolbarAlertBanner !== 'head-overlay'
+                    ? '0.5rem 1rem'
+                    : density === 'spacious'
+                      ? '0.75rem 1.25rem'
+                      : density === 'comfortable'
+                        ? '0.5rem 0.75rem'
+                        : '0.25rem 0.5rem',
+              }}
+            >
+              {alertProps?.children}
+              {alertProps?.children && (selectedAlert || groupedAlert) && (
+                <br />
+              )}
+              <Box sx={{ display: 'flex' }}>
+                {enableRowSelection &&
+                  enableSelectAll &&
+                  positionToolbarAlertBanner === 'head-overlay' && (
+                    <MRT_SelectCheckbox table={table} />
+                  )}{' '}
+                {selectedAlert}
+              </Box>
+              {selectedAlert && groupedAlert && <br />}
+              {groupedAlert}
+            </Stack>
+          </>
+        )}
+      </Alert>
+    </Collapse>
+  );
+};

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -0,0 +1,81 @@
+import Box, { type BoxProps } from '@mui/material/Box';
+import Fade from '@mui/material/Fade';
+import { alpha } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import { type DragEvent, useEffect } from 'react';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_ToolbarDropZoneProps<TData extends MRT_RowData>
+  extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ToolbarDropZoneProps<TData>) => {
+  const {
+    getState,
+    options: { enableGrouping, localization },
+    setHoveredColumn,
+    setShowToolbarDropZone,
+  } = table;
+
+  const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } =
+    getState();
+
+  const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
+    setHoveredColumn({ id: 'drop-zone' });
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
+  useEffect(() => {
+    if (table.options.state?.showToolbarDropZone !== undefined) {
+      setShowToolbarDropZone(
+        !!enableGrouping &&
+          !!draggingColumn &&
+          draggingColumn.columnDef.enableGrouping !== false &&
+          !grouping.includes(draggingColumn.id),
+      );
+    }
+  }, [enableGrouping, draggingColumn, grouping]);
+
+  return (
+    <Fade in={showToolbarDropZone}>
+      <Box
+        className="Mui-ToolbarDropZone"
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        {...rest}
+        sx={(theme) => ({
+          alignItems: 'center',
+          backdropFilter: 'blur(4px)',
+          backgroundColor: alpha(theme.palette.info.main, hoveredColumn?.id === 'drop-zone' ? 0.2 : 0.1),
+          border: `dashed ${theme.palette.info.main} 2px`,
+          boxSizing: 'border-box',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          position: 'absolute',
+          width: '100%',
+          zIndex: 4,
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
+      >
+        <Typography sx={{
+          fontStyle: "italic"
+        }}>
+          {localization.dropToGroupBy.replace(
+            '{column}',
+            draggingColumn?.columnDef?.header ?? '',
+          )}
+        </Typography>
+      </Box>
+    </Fade>
+  );
+};

package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -0,0 +1,73 @@
+import Box, { type BoxProps } from '@mui/material/Box';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
+import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
+import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
+
+export interface MRT_ToolbarInternalButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ToolbarInternalButtonsProps<TData>) => {
+  const {
+    options: {
+      columnFilterDisplayMode,
+      enableColumnFilters,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableDensityToggle,
+      enableFilters,
+      enableFullScreenToggle,
+      enableGlobalFilter,
+      enableHiding,
+      initialState,
+      renderToolbarInternalActions,
+    },
+  } = table;
+
+  return (
+    <Box
+      {...rest}
+      sx={(theme) => ({
+        alignItems: 'center',
+        display: 'flex',
+        zIndex: 3,
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
+      {renderToolbarInternalActions?.({
+        table,
+      }) ?? (
+        <>
+          {enableFilters &&
+            enableGlobalFilter &&
+            !initialState?.showGlobalFilter && (
+              <MRT_ToggleGlobalFilterButton table={table} />
+            )}
+          {enableFilters &&
+            enableColumnFilters &&
+            columnFilterDisplayMode !== 'popover' && (
+              <MRT_ToggleFiltersButton table={table} />
+            )}
+          {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
+            <MRT_ShowHideColumnsButton table={table} />
+          )}
+          {enableDensityToggle && (
+            <MRT_ToggleDensePaddingButton table={table} />
+          )}
+          {enableFullScreenToggle && (
+            <MRT_ToggleFullScreenButton table={table} />
+          )}
+        </>
+      )}
+    </Box>
+  );
+};

package/src/components/toolbar/MRT_TopToolbar.tsx

@@ -0,0 +1,131 @@
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonToolbarStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
+import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
+import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
+import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
+
+export interface MRT_TopToolbarProps<TData extends MRT_RowData> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TopToolbar = <TData extends MRT_RowData>({
+  table,
+}: MRT_TopToolbarProps<TData>) => {
+  const {
+    getState,
+    options: {
+      enableGlobalFilter,
+      enablePagination,
+      enableToolbarInternalActions,
+      muiTopToolbarProps,
+      positionGlobalFilter,
+      positionPagination,
+      positionToolbarAlertBanner,
+      positionToolbarDropZone,
+      renderTopToolbarCustomActions,
+    },
+    refs: { topToolbarRef },
+  } = table;
+
+  const { isFullScreen, showGlobalFilter } = getState();
+
+  const isMobile = useMediaQuery('(max-width:720px)');
+  const isTablet = useMediaQuery('(max-width:1024px)');
+
+  const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
+
+  const stackAlertBanner =
+    isMobile ||
+    !!renderTopToolbarCustomActions ||
+    (showGlobalFilter && isTablet);
+
+  const globalFilterProps = {
+    sx: !isTablet
+      ? {
+          zIndex: 2,
+        }
+      : undefined,
+    table,
+  };
+
+  return (
+    <Box
+      {...toolbarProps}
+      ref={(ref: HTMLDivElement) => {
+        topToolbarRef.current = ref;
+        if (toolbarProps?.ref) {
+          // @ts-expect-error
+          toolbarProps.ref.current = ref;
+        }
+      }}
+      sx={(theme) => ({
+        ...getCommonToolbarStyles({ table, theme }),
+        position: isFullScreen ? 'sticky' : 'relative',
+        top: isFullScreen ? '0' : undefined,
+        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
+      })}
+    >
+      {positionToolbarAlertBanner === 'top' && (
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          table={table}
+        />
+      )}
+      {['both', 'top'].includes(positionToolbarDropZone ?? '') && (
+        <MRT_ToolbarDropZone table={table} />
+      )}
+      <Box
+        sx={{
+          alignItems: 'flex-start',
+          boxSizing: 'border-box',
+          display: 'flex',
+          gap: '0.5rem',
+          justifyContent: 'space-between',
+          p: '0.5rem',
+          position: stackAlertBanner ? 'relative' : 'absolute',
+          right: 0,
+          top: 0,
+          width: '100%',
+        }}
+      >
+        {enableGlobalFilter && positionGlobalFilter === 'left' && (
+          <MRT_GlobalFilterTextField {...globalFilterProps} />
+        )}
+        {renderTopToolbarCustomActions?.({ table }) ?? <span />}
+        {enableToolbarInternalActions ? (
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              flexWrap: 'wrap-reverse',
+              gap: '0.5rem',
+              justifyContent: 'flex-end',
+            }}
+          >
+            {enableGlobalFilter && positionGlobalFilter === 'right' && (
+              <MRT_GlobalFilterTextField {...globalFilterProps} />
+            )}
+            <MRT_ToolbarInternalButtons table={table} />
+          </Box>
+        ) : (
+          enableGlobalFilter &&
+          positionGlobalFilter === 'right' && (
+            <MRT_GlobalFilterTextField {...globalFilterProps} />
+          )
+        )}
+      </Box>
+      {enablePagination &&
+        ['both', 'top'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination position="top" table={table} />
+        )}
+      <MRT_LinearProgressBar isTopToolbar table={table} />
+    </Box>
+  );
+};

package/src/fns/aggregationFns.ts

@@ -0,0 +1,3 @@
+import { aggregationFns } from '@tanstack/react-table';
+
+export const MRT_AggregationFns = { ...aggregationFns };

package/src/fns/filterFns.ts

@@ -0,0 +1,197 @@
+import {
+  type RankingInfo,
+  rankings,
+  rankItem,
+} from '@tanstack/match-sorter-utils';
+import { filterFns, type Row } 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,
+): boolean => {
+  const itemRank = rankItem(
+    row.getValue<null | number | string>(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,
+): boolean =>
+  !!row
+    .getValue<null | 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,
+): boolean =>
+  !!row
+    .getValue<null | 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,
+): boolean =>
+  !!row
+    .getValue<null | 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,
+): boolean =>
+  row.getValue<null | 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,
+): boolean =>
+  row.getValue<null | 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,
+): boolean =>
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +(row.getValue<null | number | string>(id) ?? 0) > +filterValue
+    : (row.getValue<null | 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,
+): boolean => 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,
+): boolean =>
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +(row.getValue<null | number | string>(id) ?? 0) < +filterValue
+    : (row.getValue<null | 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,
+): boolean => 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],
+): boolean =>
+  ((['', 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],
+): boolean =>
+  ((['', 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,
+): boolean => !row.getValue<null | number | string>(id)?.toString().trim();
+
+empty.autoRemove = (val: any) => !val;
+
+const notEmpty = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  _filterValue: number | string,
+): boolean => !!row.getValue<null | 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/fns/sortingFns.ts

@@ -0,0 +1,34 @@
+import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
+import { type Row, sortingFns } from '@tanstack/react-table';
+
+import { type MRT_Row, type MRT_RowData } from '../types';
+
+const fuzzy = <TData extends MRT_RowData>(
+  rowA: Row<TData>,
+  rowB: Row<TData>,
+  columnId: string,
+) => {
+  let dir = 0;
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(
+      rowA.columnFiltersMeta[columnId] as RankingInfo,
+      rowB.columnFiltersMeta[columnId] as RankingInfo,
+    );
+  }
+  // Provide a fallback for when the item ranks are equal
+  return dir === 0
+    ? sortingFns.alphanumeric(rowA as Row<any>, rowB as Row<any>, columnId)
+    : dir;
+};
+
+export const MRT_SortingFns = {
+  ...sortingFns,
+  fuzzy,
+};
+
+export const rankGlobalFuzzy = <TData extends MRT_RowData>(
+  rowA: MRT_Row<TData>,
+  rowB: MRT_Row<TData>,
+) =>
+  Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
+  Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));