@lminii/material-react-table 4.0.0

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -0,0 +1,184 @@
+import { Fragment, useMemo } from 'react';
+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 { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRT_SelectAllHandler } from '../../utils/row.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+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,
+    options: {
+      enableRowSelection,
+      enableSelectAll,
+      localization,
+      manualPagination,
+      muiToolbarAlertBannerChipProps,
+      muiToolbarAlertBannerProps,
+      positionToolbarAlertBanner,
+      renderToolbarAlertBannerContent,
+      rowCount,
+    },
+    refs: { tablePaperRef },
+    state,
+  } = table;
+  const { density, grouping, rowSelection, showAlertBanner } = state;
+
+  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,83 @@
+import { type DragEvent, useEffect } from 'react';
+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 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 {
+    options: { enableGrouping, localization },
+    setHoveredColumn,
+    setShowToolbarDropZone,
+    state,
+  } = table;
+
+  const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } =
+    state;
+
+  const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
+    setHoveredColumn({ id: 'drop-zone' });
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
+  useEffect(() => {
+    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,72 @@
+import Box, { type BoxProps } from '@mui/material/Box';
+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';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+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,130 @@
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
+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';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonToolbarStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+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 {
+    options: {
+      enableGlobalFilter,
+      enablePagination,
+      enableToolbarInternalActions,
+      muiTopToolbarProps,
+      positionGlobalFilter,
+      positionPagination,
+      positionToolbarAlertBanner,
+      positionToolbarDropZone,
+      renderTopToolbarCustomActions,
+    },
+    refs: { topToolbarRef },
+    state,
+  } = table;
+
+  const { isFullScreen, showGlobalFilter } = state;
+
+  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/features/mrtCellActionsFeature.ts

@@ -0,0 +1,67 @@
+import {
+  assignTableAPIs,
+  functionalUpdate,
+  makeStateUpdater,
+  type OnChangeFn,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type Updater,
+} from '@tanstack/react-table';
+import { type MRT_Cell } from '../types';
+
+export interface MRT_Table_CellActions<TData extends RowData> {
+  setActionCell: (updater: Updater<MRT_Cell<TData> | null>) => void;
+}
+
+export interface MRT_TableOptions_CellActions<TData extends RowData> {
+  onActionCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
+}
+
+export interface MRT_TableState_CellActions {
+  actionCell: MRT_Cell<any> | null;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtCellActionsFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtCellActionsFeature: MRT_Table_CellActions<TData>;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtCellActionsFeature: MRT_TableOptions_CellActions<TData>;
+  }
+  interface TableState_FeatureMap {
+    mrtCellActionsFeature: MRT_TableState_CellActions;
+  }
+}
+
+export const mrtCellActionsFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtCellActionsFeature', table, {
+      table_setActionCell: {
+        fn: (updater: Updater<MRT_Cell<any> | null>) =>
+          (
+            table.options as MRT_TableOptions_CellActions<any>
+          ).onActionCellChange?.((old) => functionalUpdate(updater, old)),
+      },
+    });
+  },
+  getDefaultTableOptions: (table) => ({
+    onActionCellChange: makeStateUpdater(
+      'actionCell',
+      table,
+    ) as OnChangeFn<any>,
+  }),
+  getInitialState: (initialState) => ({
+    actionCell: null,
+    ...initialState,
+  }),
+};

package/src/features/mrtColumnDraggingFeature.ts

@@ -0,0 +1,83 @@
+import {
+  assignTableAPIs,
+  functionalUpdate,
+  makeStateUpdater,
+  type OnChangeFn,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type Updater,
+} from '@tanstack/react-table';
+import { type MRT_Column } from '../types';
+
+export interface MRT_Table_ColumnDragging<TData extends RowData> {
+  setDraggingColumn: (updater: Updater<MRT_Column<TData> | null>) => void;
+  setHoveredColumn: (
+    updater: Updater<null | Partial<MRT_Column<TData>>>,
+  ) => void;
+}
+
+export interface MRT_TableOptions_ColumnDragging<TData extends RowData> {
+  onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+  onHoveredColumnChange?: OnChangeFn<null | Partial<MRT_Column<TData>>>;
+}
+
+export interface MRT_TableState_ColumnDragging {
+  draggingColumn: MRT_Column<any> | null;
+  hoveredColumn: null | Partial<MRT_Column<any>>;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtColumnDraggingFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtColumnDraggingFeature: MRT_Table_ColumnDragging<TData>;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtColumnDraggingFeature: MRT_TableOptions_ColumnDragging<TData>;
+  }
+  interface TableState_FeatureMap {
+    mrtColumnDraggingFeature: MRT_TableState_ColumnDragging;
+  }
+}
+
+export const mrtColumnDraggingFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtColumnDraggingFeature', table, {
+      table_setDraggingColumn: {
+        fn: (updater: Updater<MRT_Column<any> | null>) =>
+          (
+            table.options as MRT_TableOptions_ColumnDragging<any>
+          ).onDraggingColumnChange?.((old) => functionalUpdate(updater, old)),
+      },
+      table_setHoveredColumn: {
+        fn: (updater: Updater<null | Partial<MRT_Column<any>>>) =>
+          (
+            table.options as MRT_TableOptions_ColumnDragging<any>
+          ).onHoveredColumnChange?.((old) => functionalUpdate(updater, old)),
+      },
+    });
+  },
+  getDefaultTableOptions: (table) => ({
+    onDraggingColumnChange: makeStateUpdater(
+      'draggingColumn',
+      table,
+    ) as OnChangeFn<any>,
+    onHoveredColumnChange: makeStateUpdater(
+      'hoveredColumn',
+      table,
+    ) as OnChangeFn<any>,
+  }),
+  getInitialState: (initialState) => ({
+    draggingColumn: null,
+    hoveredColumn: null,
+    ...initialState,
+  }),
+};

package/src/features/mrtDensityFeature.ts

@@ -0,0 +1,64 @@
+import {
+  assignTableAPIs,
+  functionalUpdate,
+  makeStateUpdater,
+  type OnChangeFn,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type Updater,
+} from '@tanstack/react-table';
+import { type MRT_DensityState } from '../types';
+
+export interface MRT_Table_Density {
+  setDensity: (updater: Updater<MRT_DensityState>) => void;
+}
+
+export interface MRT_TableOptions_Density {
+  onDensityChange?: OnChangeFn<MRT_DensityState>;
+}
+
+export interface MRT_TableState_Density {
+  density: MRT_DensityState;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtDensityFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtDensityFeature: MRT_Table_Density;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtDensityFeature: MRT_TableOptions_Density;
+  }
+  interface TableState_FeatureMap {
+    mrtDensityFeature: MRT_TableState_Density;
+  }
+}
+
+export const mrtDensityFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtDensityFeature', table, {
+      table_setDensity: {
+        fn: (updater: Updater<MRT_DensityState>) =>
+          (table.options as MRT_TableOptions_Density).onDensityChange?.((old) =>
+            functionalUpdate(updater, old),
+          ),
+      },
+    });
+  },
+  getDefaultTableOptions: (table) => ({
+    onDensityChange: makeStateUpdater('density', table),
+  }),
+  getInitialState: (initialState) => ({
+    density: 'comfortable',
+    ...initialState,
+  }),
+};