@lminii/material-react-table 4.0.0

package/src/features/mrtToolbarsFeature.ts

@@ -0,0 +1,76 @@
+import {
+  assignTableAPIs,
+  functionalUpdate,
+  makeStateUpdater,
+  type OnChangeFn,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type Updater,
+} from '@tanstack/react-table';
+
+export interface MRT_Table_Toolbars {
+  setShowAlertBanner: (updater: Updater<boolean>) => void;
+  setShowToolbarDropZone: (updater: Updater<boolean>) => void;
+}
+
+export interface MRT_TableOptions_Toolbars {
+  onShowAlertBannerChange?: OnChangeFn<boolean>;
+  onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
+}
+
+export interface MRT_TableState_Toolbars {
+  showAlertBanner: boolean;
+  showToolbarDropZone: boolean;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtToolbarsFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtToolbarsFeature: MRT_Table_Toolbars;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtToolbarsFeature: MRT_TableOptions_Toolbars;
+  }
+  interface TableState_FeatureMap {
+    mrtToolbarsFeature: MRT_TableState_Toolbars;
+  }
+}
+
+export const mrtToolbarsFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtToolbarsFeature', table, {
+      table_setShowAlertBanner: {
+        fn: (updater: Updater<boolean>) =>
+          (
+            table.options as MRT_TableOptions_Toolbars
+          ).onShowAlertBannerChange?.((old) => functionalUpdate(updater, old)),
+      },
+      table_setShowToolbarDropZone: {
+        fn: (updater: Updater<boolean>) =>
+          (
+            table.options as MRT_TableOptions_Toolbars
+          ).onShowToolbarDropZoneChange?.((old) =>
+            functionalUpdate(updater, old),
+          ),
+      },
+    });
+  },
+  getDefaultTableOptions: (table) => ({
+    onShowAlertBannerChange: makeStateUpdater('showAlertBanner', table),
+    onShowToolbarDropZoneChange: makeStateUpdater('showToolbarDropZone', table),
+  }),
+  getInitialState: (initialState) => ({
+    showAlertBanner: false,
+    showToolbarDropZone: false,
+    ...initialState,
+  }),
+};

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,196 @@
+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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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<any, 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,31 @@
+import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
+import { type Row, sortFns } from '@tanstack/react-table';
+import { type MRT_Row, type MRT_RowData } from '../types';
+
+const fuzzy = <TData extends MRT_RowData>(
+  rowA: Row<any, TData>,
+  rowB: Row<any, 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 ? sortFns.alphanumeric(rowA, rowB, columnId) : dir;
+};
+
+export const MRT_SortingFns = {
+  ...sortFns,
+  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));

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

@@ -0,0 +1,28 @@
+import { MRT_ToggleRowActionMenuButton } from '../../components/buttons/MRT_ToggleRowActionMenuButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> => {
+  return {
+    Cell: ({ cell, row, staticRowIndex, table }) => (
+      <MRT_ToggleRowActionMenuButton
+        cell={cell}
+        row={row}
+        staticRowIndex={staticRowIndex}
+        table={table}
+      />
+    ),
+    ...defaultDisplayColumnProps({
+      header: 'actions',
+      id: 'mrt-row-actions',
+      size: 70,
+      tableOptions,
+    }),
+  };
+};

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 | null>}
+        table={table}
+      />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'move',
+      id: 'mrt-row-drag',
+      size: 60,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,97 @@
+import { type ReactNode } from 'react';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { MRT_ExpandAllButton } from '../../components/buttons/MRT_ExpandAllButton';
+import { MRT_ExpandButton } from '../../components/buttons/MRT_ExpandButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+
+export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> => {
+  const {
+    defaultColumn,
+    enableExpandAll,
+    groupedColumnMode,
+    positionExpandColumn,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+
+  const alignProps =
+    positionExpandColumn === 'last'
+      ? ({
+          align: 'right',
+        } as const)
+      : undefined;
+
+  return {
+    Cell: ({ cell, column, row, staticRowIndex, table }) => {
+      const expandButtonProps = { row, staticRowIndex, table };
+      const subRowsLength = row.subRows?.length;
+      if (groupedColumnMode === 'remove' && row.groupingColumnId) {
+        return (
+          <Stack
+            sx={{
+              alignItems: 'center',
+              flexDirection: 'row',
+              gap: '0.25rem',
+            }}
+          >
+            <MRT_ExpandButton {...expandButtonProps} />
+            <Tooltip
+              {...getCommonTooltipProps('right')}
+              title={table.getColumn(row.groupingColumnId).columnDef.header}
+            >
+              <span>{row.groupingValue as ReactNode}</span>
+            </Tooltip>
+            {!!subRowsLength && <span>({subRowsLength})</span>}
+          </Stack>
+        );
+      } else {
+        return (
+          <>
+            <MRT_ExpandButton {...expandButtonProps} />
+            {column.columnDef.GroupedCell?.({ cell, column, row, table })}
+          </>
+        );
+      }
+    },
+    Header: enableExpandAll
+      ? ({ table }) => {
+          return (
+            <>
+              <MRT_ExpandAllButton table={table} />
+              {groupedColumnMode === 'remove' &&
+                grouping
+                  ?.map(
+                    (groupedColumnId) =>
+                      table.getColumn(groupedColumnId).columnDef.header,
+                  )
+                  ?.join(', ')}
+            </>
+          );
+        }
+      : undefined,
+    muiTableBodyCellProps: alignProps,
+    muiTableHeadCellProps: alignProps,
+    ...defaultDisplayColumnProps({
+      header: 'expand',
+      id: 'mrt-row-expand',
+      size:
+        groupedColumnMode === 'remove'
+          ? (defaultColumn?.size ?? 180)
+          : renderDetailPanel
+            ? enableExpandAll
+              ? 60
+              : 70
+            : 100,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,30 @@
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> => {
+  const { localization, rowNumberDisplayMode } = tableOptions;
+  const {
+    pagination: { pageIndex, pageSize },
+  } = tableOptions.state;
+
+  return {
+    Cell: ({ row, staticRowIndex }) =>
+      ((rowNumberDisplayMode === 'static'
+        ? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0)
+        : row.index) ?? 0) + 1,
+    grow: false,
+    Header: () => localization.rowNumber,
+    ...defaultDisplayColumnProps({
+      header: 'rowNumbers',
+      id: 'mrt-row-numbers',
+      size: 50,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,24 @@
+import { MRT_TableBodyRowPinButton } from '../../components/body/MRT_TableBodyRowPinButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> => {
+  return {
+    Cell: ({ row, table }) => (
+      <MRT_TableBodyRowPinButton row={row} table={table} />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'pin',
+      id: 'mrt-row-pin',
+      size: 60,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,34 @@
+import { MRT_SelectCheckbox } from '../../components/inputs/MRT_SelectCheckbox';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> => {
+  const { enableMultiRowSelection, enableSelectAll } = tableOptions;
+
+  return {
+    Cell: ({ row, staticRowIndex, table }) => (
+      <MRT_SelectCheckbox
+        row={row}
+        staticRowIndex={staticRowIndex}
+        table={table}
+      />
+    ),
+    grow: false,
+    Header:
+      enableSelectAll && enableMultiRowSelection
+        ? ({ table }) => <MRT_SelectCheckbox table={table} />
+        : undefined,
+    ...defaultDisplayColumnProps({
+      header: 'select',
+      id: 'mrt-row-select',
+      size: enableSelectAll ? 60 : 70,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,33 @@
+import { MRT_DefaultDisplayColumn } from '../useMRT_TableOptions';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+
+const blankColProps = {
+  children: null,
+  sx: {
+    minWidth: 0,
+    p: 0,
+    width: 0,
+  },
+};
+
+export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> => {
+  return {
+    ...defaultDisplayColumnProps({
+      id: 'mrt-row-spacer',
+      size: 0,
+      tableOptions,
+    }),
+    grow: true,
+    ...MRT_DefaultDisplayColumn,
+    muiTableBodyCellProps: blankColProps,
+    muiTableFooterCellProps: blankColProps,
+    muiTableHeadCellProps: blankColProps,
+  };
+};