@kissesses/mantine-react-table-open 9.0.3

package/src/components/toolbar/MRT_TopToolbar.tsx

@@ -0,0 +1,128 @@
+import clsx from 'clsx';
+
+import commonClasses from './common.styles.module.css';
+import classes from './MRT_TopToolbar.module.css';
+
+import { Box, type BoxProps, Flex } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+import { MRT_ProgressBar } from './MRT_ProgressBar';
+import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
+import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GlobalFilterTextInput } from '../inputs/MRT_GlobalFilterTextInput';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TopToolbar = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      enableGlobalFilter,
+      enablePagination,
+      enableToolbarInternalActions,
+      mantineTopToolbarProps,
+      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(mantineTopToolbarProps, { table }),
+    ...rest,
+  };
+
+  const stackAlertBanner =
+    isMobile ||
+    !!renderTopToolbarCustomActions ||
+    (showGlobalFilter && isTablet);
+
+  const globalFilterProps = {
+    style: !isTablet
+      ? {
+          zIndex: 3,
+        }
+      : undefined,
+    table,
+  };
+
+  return (
+    <Box
+      {...toolbarProps}
+      className={clsx(
+        commonClasses['common-toolbar-styles'],
+        classes['root'],
+        isFullScreen && classes['root-fullscreen'],
+        toolbarProps?.className,
+      )}
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          topToolbarRef.current = node;
+          if (toolbarProps?.ref) {
+            toolbarProps.ref.current = node;
+          }
+        }
+      }}
+    >
+      {positionToolbarAlertBanner === 'top' && (
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          table={table}
+        />
+      )}
+      {['both', 'top'].includes(positionToolbarDropZone ?? '') && (
+        <MRT_ToolbarDropZone table={table} />
+      )}
+      <Flex
+        className={clsx(
+          classes['actions-container'],
+          stackAlertBanner && classes['actions-container-stack-alert'],
+        )}
+      >
+        {enableGlobalFilter && positionGlobalFilter === 'left' && (
+          <MRT_GlobalFilterTextInput {...globalFilterProps} />
+        )}
+        {renderTopToolbarCustomActions?.({ table }) ?? <span />}
+        {enableToolbarInternalActions ? (
+          <Flex justify={'end'} wrap={'wrap-reverse'}>
+            {enableGlobalFilter && positionGlobalFilter === 'right' && (
+              <MRT_GlobalFilterTextInput {...globalFilterProps} />
+            )}
+            <MRT_ToolbarInternalButtons table={table} />
+          </Flex>
+        ) : (
+          enableGlobalFilter &&
+          positionGlobalFilter === 'right' && (
+            <MRT_GlobalFilterTextInput {...globalFilterProps} />
+          )
+        )}
+      </Flex>
+      {enablePagination &&
+        ['both', 'top'].includes(positionPagination ?? '') && (
+          <Flex justify="end">
+            <MRT_TablePagination position="top" table={table} />
+          </Flex>
+        )}
+      <MRT_ProgressBar isTopToolbar table={table} />
+    </Box>
+  );
+};

package/src/components/toolbar/common.styles.module.css

@@ -0,0 +1,10 @@
+.common-toolbar-styles {
+  align-items: flex-start;
+  display: grid;
+  flex-wrap: wrap-reverse;
+  min-height: calc(3.5rem * var(--mantine-scale));
+  overflow: visible;
+  padding: 0;
+  transition: all 150ms ease-in-out;
+  z-index: 3;
+}

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,272 @@
+import {
+  type RankingInfo,
+  rankings,
+  rankItem,
+} from '@tanstack/match-sorter-utils';
+import { filterFns, type Row } from '@tanstack/react-table';
+
+import {
+  type MRT_FilterOption,
+  type MRT_Localization,
+  type MRT_RowData,
+} from '../types';
+
+const parseComparableNumber = (value: unknown): null | number => {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  if (typeof value === 'number') {
+    return Number.isNaN(value) ? null : value;
+  }
+
+  if (value instanceof Date) {
+    const timestamp = value.getTime();
+    return Number.isNaN(timestamp) ? null : timestamp;
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return null;
+    }
+
+    const asNumber = Number(trimmed);
+    if (!Number.isNaN(asNumber)) {
+      return asNumber;
+    }
+
+    const timestamp = Date.parse(trimmed);
+    if (!Number.isNaN(timestamp)) {
+      return timestamp;
+    }
+
+    return null;
+  }
+
+  if (typeof value === 'object') {
+    const primitive = (value as { valueOf?: () => unknown }).valueOf?.();
+    if (primitive !== undefined && primitive !== value) {
+      return parseComparableNumber(primitive);
+    }
+  }
+
+  return null;
+};
+
+const normalizeStringValue = (value: unknown): string =>
+  value?.toString?.().toLowerCase().trim() ?? '';
+
+const compareValues = (a: unknown, b: unknown): number => {
+  const aNumber = parseComparableNumber(a);
+  const bNumber = parseComparableNumber(b);
+
+  if (aNumber !== null && bNumber !== null) {
+    if (aNumber === bNumber) return 0;
+    return aNumber > bNumber ? 1 : -1;
+  }
+
+  const aString = normalizeStringValue(a);
+  const bString = normalizeStringValue(b);
+
+  if (aString === bString) return 0;
+  return aString > bString ? 1 : -1;
+};
+
+const isNullishFilterValue = (value: unknown) =>
+  value === undefined || value === null || value === '';
+
+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,
+) =>
+  normalizeStringValue(row.getValue(id)).includes(
+    normalizeStringValue(filterValue),
+  );
+
+contains.autoRemove = (val: any) => !val;
+
+const startsWith = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  normalizeStringValue(row.getValue(id)).startsWith(
+    normalizeStringValue(filterValue),
+  );
+
+startsWith.autoRemove = (val: any) => !val;
+
+const endsWith = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) =>
+  normalizeStringValue(row.getValue(id)).endsWith(
+    normalizeStringValue(filterValue),
+  );
+
+endsWith.autoRemove = (val: any) => !val;
+
+const equals = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => compareValues(row.getValue(id), filterValue) === 0;
+
+equals.autoRemove = (val: any) => !val;
+
+const notEquals = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => normalizeStringValue(row.getValue(id)) !== normalizeStringValue(filterValue);
+
+notEquals.autoRemove = (val: any) => !val;
+
+const greaterThan = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => compareValues(row.getValue(id), filterValue) > 0;
+
+greaterThan.autoRemove = (val: any) => !val;
+
+const greaterThanOrEqualTo = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => compareValues(row.getValue(id), filterValue) >= 0;
+
+greaterThanOrEqualTo.autoRemove = (val: any) => !val;
+
+const lessThan = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => compareValues(row.getValue(id), filterValue) < 0;
+
+lessThan.autoRemove = (val: any) => !val;
+
+const lessThanOrEqualTo = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValue: number | string,
+) => compareValues(row.getValue(id), filterValue) <= 0;
+
+lessThanOrEqualTo.autoRemove = (val: any) => !val;
+
+const between = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValues: [number | string, number | string],
+) => {
+  const [min, max] = filterValues;
+
+  if (isNullishFilterValue(min) && isNullishFilterValue(max)) {
+    return true;
+  }
+
+  if (!isNullishFilterValue(min) && compareValues(row.getValue(id), min) <= 0) {
+    return false;
+  }
+
+  if (!isNullishFilterValue(max) && compareValues(row.getValue(id), max) >= 0) {
+    return false;
+  }
+
+  return true;
+};
+
+between.autoRemove = (val: any) => !val;
+
+const betweenInclusive = <TData extends MRT_RowData>(
+  row: Row<TData>,
+  id: string,
+  filterValues: [number | string, number | string],
+) => {
+  const [min, max] = filterValues;
+
+  if (isNullishFilterValue(min) && isNullishFilterValue(max)) {
+    return true;
+  }
+
+  if (
+    !isNullishFilterValue(min) &&
+    compareValues(row.getValue(id), min) < 0
+  ) {
+    return false;
+  }
+
+  if (
+    !isNullishFilterValue(max) &&
+    compareValues(row.getValue(id), max) > 0
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+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,
+};
+
+export function localizedFilterOption(
+  localization: MRT_Localization,
+  option: MRT_FilterOption,
+) {
+  if (!option) {
+    return '';
+  }
+  const key = `filter${option[0].toUpperCase()}${option.slice(1)}`;
+  return localization[key as keyof MRT_Localization] ?? '';
+}

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));

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

@@ -0,0 +1,23 @@
+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> | null => {
+  return {
+    Cell: ({ cell, row, table }) => (
+      <MRT_ToggleRowActionMenuButton cell={cell} row={row} table={table} />
+    ),
+    ...defaultDisplayColumnProps({
+      header: 'actions',
+      id: 'mrt-row-actions',
+      size: 70,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,30 @@
+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> | null => {
+  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,92 @@
+import { type ReactNode } from 'react';
+
+import { Flex, Tooltip } from '@mantine/core';
+
+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';
+
+export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  const {
+    defaultColumn,
+    enableExpandAll,
+    groupedColumnMode,
+    positionExpandColumn,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+
+  const alignProps =
+    positionExpandColumn === 'last'
+      ? ({
+          align: 'right',
+        } as const)
+      : undefined;
+
+  return {
+    Cell: ({ cell, column, row, table }) => {
+      const expandButtonProps = { row, table };
+      const subRowsLength = row.subRows?.length;
+      if (tableOptions.groupedColumnMode === 'remove' && row.groupingColumnId) {
+        return (
+          <Flex align="center" gap="0.25rem">
+            <MRT_ExpandButton {...expandButtonProps} />
+            <Tooltip
+              label={table.getColumn(row.groupingColumnId).columnDef.header}
+              openDelay={1000}
+              position="right"
+            >
+              <span>{row.groupingValue as ReactNode}</span>
+            </Tooltip>
+            {!!subRowsLength && <span>({subRowsLength})</span>}
+          </Flex>
+        );
+      } else {
+        return (
+          <>
+            <MRT_ExpandButton {...expandButtonProps} />
+            {column.columnDef.GroupedCell?.({ cell, column, row, table })}
+          </>
+        );
+      }
+    },
+    Header: enableExpandAll
+      ? ({ table }) => {
+          return (
+            <Flex align="center">
+              <MRT_ExpandAllButton table={table} />
+              {groupedColumnMode === 'remove' &&
+                grouping
+                  ?.map(
+                    (groupedColumnId) =>
+                      table.getColumn(groupedColumnId).columnDef.header,
+                  )
+                  ?.join(', ')}
+            </Flex>
+          );
+        }
+      : undefined,
+    mantineTableBodyCellProps: alignProps,
+    mantineTableHeadCellProps: 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> | null => {
+  const { localization, rowNumberDisplayMode } = tableOptions;
+  const {
+    pagination: { pageIndex, pageSize },
+  } = tableOptions.state;
+
+  return {
+    Cell: ({ renderedRowIndex = 0, row }) =>
+      ((rowNumberDisplayMode === 'static'
+        ? renderedRowIndex + pageSize * pageIndex
+        : 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> | null => {
+  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> | null => {
+  const { enableMultiRowSelection, enableSelectAll } = tableOptions;
+
+  return {
+    Cell: ({ renderedRowIndex, row, table }) => (
+      <MRT_SelectCheckbox
+        renderedRowIndex={renderedRowIndex}
+        row={row}
+        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,
+    }),
+  };
+};