material-react-table 0.8.0 → 0.8.3

package/dist/table/MRT_TableContainer.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 interface Props {
     tableInstance: MRT_TableInstance;
 }

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
     [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0",
+  "version": "0.8.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of Tanstack react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -7,7 +7,7 @@
   "keywords": [
     "react-table",
     "material-ui",
-    "material-table", 
+    "material-table",
     "tanstack table"
   ],
   "repository": {
@@ -19,6 +19,7 @@
     "url": "https://github.com/KevinVandy/material-react-table/issues"
   },
   "main": "dist/index.js",
+  "module": "dist/material-react-table.esm.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
@@ -44,15 +45,14 @@
       "pre-commit": "tsdx lint && format"
     }
   },
-  "module": "dist/material-react-table.esm.js",
   "size-limit": [
     {
       "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "40 KB"
+      "limit": "60 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "40 KB"
+      "limit": "60 KB"
     }
   ],
   "devDependencies": {
@@ -60,8 +60,8 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@faker-js/faker": "^6.3.1",
-    "@mui/icons-material": "^5.8.0",
-    "@mui/material": "^5.8.1",
+    "@mui/icons-material": "^5.8.2",
+    "@mui/material": "^5.8.2",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.5",
     "@storybook/addon-actions": "^6.5.5",
@@ -95,6 +95,8 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-alpha.89"
+    "@tanstack/react-table": "^8.0.0-alpha.89",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.2"
   }
 }

package/src/MaterialReactTable.tsx

@@ -178,6 +178,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
+  enableColumnOrdering?: boolean;
   enableEditing?: boolean;
   enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
   filterFn?: MRT_FilterFn;
@@ -332,6 +333,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnOrdering?: boolean;
     enableDensePaddingToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
@@ -763,12 +765,14 @@ export default <D extends Record<string, any> = {}>({
   editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,
+  enableColumnOrdering = false,
   enableColumnResizing = false,
   enableDensePaddingToggle = true,
   enableExpandAll = true,
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
+  enableGrouping = false,
   enableHiding = true,
   enableMultiRowSelection = true,
   enablePagination = true,
@@ -797,12 +801,14 @@ export default <D extends Record<string, any> = {}>({
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
     enableColumnFilters={enableColumnFilters}
+    enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
+    enableGrouping={enableGrouping}
     enableHiding={enableHiding}
     enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import type { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_DraggableTableHeadCell: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
+  const {
+    getState,
+    options: {},
+    setColumnOrder,
+  } = tableInstance;
+
+  const { columnOrder } = getState();
+
+  const reorder = (item: MRT_Header, newIndex: number) => {
+    const { index: currentIndex } = item;
+    columnOrder.splice(newIndex, 0, columnOrder.splice(currentIndex, 1)[0]);
+    setColumnOrder([...columnOrder]);
+  };
+
+  const [, drop] = useDrop({
+    accept: 'header',
+    drop: (item: MRT_Header) => reorder(item, header.index),
+  });
+
+  const [{ isDragging }, drag, preview] = useDrag({
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    item: () => header,
+    type: 'header',
+  });
+
+  return (
+    <MRT_TableHeadCell
+      dragRef={drag}
+      dropRef={drop}
+      header={header}
+      isDragging={isDragging}
+      previewRef={preview}
+      tableInstance={tableInstance}
+    />
+  );
+};

package/src/head/MRT_TableHeadCell.tsx

@@ -1,42 +1,43 @@
-import React, { FC, MouseEvent, ReactNode } from 'react';
-import {
-  Box,
-  Collapse,
-  Divider,
-  IconButton,
-  TableCell,
-  TableSortLabel,
-  Theme,
-  Tooltip,
-  alpha,
-  lighten,
-} from '@mui/material';
-import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
+import React, { FC, ReactNode, Ref } from 'react';
+import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
+import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
+import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
+import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 import type { MRT_Header, MRT_TableInstance } from '..';
-import MRT_FilterRangeFields from '../inputs/MRT_FilterRangeFields';
-import { MRT_FILTER_OPTION } from '../enums';
 
 interface Props {
+  dragRef?: Ref<HTMLButtonElement>;
+  dropRef?: Ref<HTMLDivElement>;
   header: MRT_Header;
+  isDragging?: boolean;
+  previewRef?: Ref<HTMLTableCellElement>;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
+export const MRT_TableHeadCell: FC<Props> = ({
+  dragRef,
+  dropRef,
+  header,
+  isDragging,
+  previewRef,
+  tableInstance,
+}) => {
   const {
     getState,
     options: {
       enableColumnActions,
       enableColumnFilters,
+      enableColumnOrdering,
       enableColumnResizing,
-      icons: { FilterAltIcon, FilterAltOff },
-      localization,
+      enableGrouping,
       muiTableHeadCellProps,
     },
-    setShowFilters,
   } = tableInstance;
 
-  const { currentFilterFns, isDensePadding, showFilters } = getState();
+  const { isDensePadding } = getState();
 
   const { column } = header;
 
@@ -55,45 +56,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
     ...mcTableHeadCellProps,
   };
 
-  const sortTooltip = !!column.getIsSorted()
-    ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
-      : localization.sortedByColumnAsc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
-    : localization.unsorted;
-
-  const filterFn = getState()?.currentFilterFns?.[header.id];
-
-  const filterTooltip = !!column.getFilterValue()
-    ? localization.filteringByColumn
-        .replace('{column}', String(column.columnDef.header))
-        .replace(
-          '{filterType}',
-          filterFn instanceof Function
-            ? ''
-            : // @ts-ignore
-              localization[
-                `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
-              ],
-        )
-        .replace(
-          '{filterValue}',
-          `"${
-            Array.isArray(column.getFilterValue())
-              ? (column.getFilterValue() as [string, string]).join(
-                  `" ${localization.and} "`,
-                )
-              : (column.getFilterValue() as string)
-          }"`,
-        )
-        .replace('" "', '')
-    : localization.showHideFilters;
-
   const headerElement = (column.columnDef?.Header?.({
     header,
     tableInstance,
@@ -124,6 +86,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       align={column.columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
       {...tableCellProps}
+      ref={column.columnDefType === 'data' ? dropRef : undefined}
       sx={(theme: Theme) => ({
         backgroundColor:
           column.getIsPinned() && column.columnDefType !== 'group'
@@ -141,7 +104,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
-
         overflow: 'visible',
         p: isDensePadding
           ? column.columnDefType === 'display'
@@ -182,11 +144,13 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
         headerElement
       ) : (
         <Box
+          ref={previewRef}
           sx={{
             alignItems: 'flex-start',
             display: 'flex',
             justifyContent:
               column.columnDefType === 'group' ? 'center' : 'space-between',
+            opacity: isDragging ? 0.5 : 1,
             width: '100%',
           }}
         >
@@ -208,109 +172,53 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           >
             {headerElement}
             {column.columnDefType === 'data' && column.getCanSort() && (
-              <Tooltip arrow placement="top" title={sortTooltip}>
-                <TableSortLabel
-                  aria-label={sortTooltip}
-                  active={!!column.getIsSorted()}
-                  direction={
-                    column.getIsSorted()
-                      ? (column.getIsSorted() as 'asc' | 'desc')
-                      : undefined
-                  }
-                />
-              </Tooltip>
+              <MRT_TableHeadCellSortLabel
+                header={header}
+                tableInstance={tableInstance}
+              />
             )}
             {column.columnDefType === 'data' &&
               enableColumnFilters &&
-              !!column.getCanFilter() && (
-                <Tooltip arrow placement="top" title={filterTooltip}>
-                  <IconButton
-                    disableRipple
-                    onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                      event.stopPropagation();
-                      setShowFilters(!showFilters);
-                    }}
-                    size="small"
-                    sx={{
-                      m: 0,
-                      opacity: !!column.getFilterValue() ? 0.8 : 0,
-                      p: '2px',
-                      transition: 'all 0.2s ease-in-out',
-                      '&:hover': {
-                        backgroundColor: 'transparent',
-                        opacity: 0.8,
-                      },
-                    }}
-                  >
-                    {showFilters && !column.getFilterValue() ? (
-                      <FilterAltOff />
-                    ) : (
-                      <FilterAltIcon />
-                    )}
-                  </IconButton>
-                </Tooltip>
+              column.getCanFilter() && (
+                <MRT_TableHeadCellFilterLabel
+                  header={header}
+                  tableInstance={tableInstance}
+                />
+              )}
+          </Box>
+          <Box sx={{ whiteSpace: 'nowrap' }}>
+            {column.columnDefType === 'data' &&
+              ((enableColumnOrdering &&
+                column.enableColumnOrdering !== false) ||
+                (enableGrouping && column.enableGrouping !== false)) && (
+                <MRT_TableHeadCellGrabHandle
+                  header={header}
+                  ref={dragRef as Ref<HTMLButtonElement>}
+                  tableInstance={tableInstance}
+                />
+              )}
+            {(enableColumnActions || column.enableColumnActions) &&
+              column.enableColumnActions !== false &&
+              column.columnDefType !== 'group' && (
+                <MRT_ToggleColumnActionMenuButton
+                  header={header}
+                  tableInstance={tableInstance}
+                />
               )}
           </Box>
-          {(enableColumnActions || column.enableColumnActions) &&
-            column.enableColumnActions !== false &&
-            column.columnDefType !== 'group' && (
-              <MRT_ToggleColumnActionMenuButton
-                header={header}
-                tableInstance={tableInstance}
-              />
-            )}
           {column.getCanResize() && (
-            <Divider
-              flexItem
-              orientation="vertical"
-              onDoubleClick={() => column.resetSize()}
-              sx={(theme: Theme) => ({
-                borderRadius: '2px',
-                borderRightWidth: '2px',
-                cursor: 'col-resize',
-                height:
-                  showFilters && column.columnDefType === 'data'
-                    ? '4rem'
-                    : '2rem',
-                opacity: 0.8,
-                position: 'absolute',
-                right: '1px',
-                touchAction: 'none',
-                transition: column.getIsResizing()
-                  ? undefined
-                  : 'all 0.2s ease-in-out',
-                userSelect: 'none',
-                zIndex: 2000,
-                '&:active': {
-                  backgroundColor: theme.palette.info.main,
-                  opacity: 1,
-                },
-              })}
-              onMouseDown={header.getResizeHandler()}
-              onTouchStart={header.getResizeHandler()}
-              style={{
-                transform: column.getIsResizing()
-                  ? `translateX(${getState().columnSizingInfo.deltaOffset}px)`
-                  : 'none',
-              }}
+            <MRT_TableHeadCellResizeHandle
+              header={header}
+              tableInstance={tableInstance}
             />
           )}
         </Box>
       )}
       {column.columnDefType === 'data' && column.getCanFilter() && (
-        <Collapse in={showFilters} mountOnEnter unmountOnExit>
-          {currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? (
-            <MRT_FilterRangeFields
-              header={header}
-              tableInstance={tableInstance}
-            />
-          ) : (
-            <MRT_FilterTextField
-              header={header}
-              tableInstance={tableInstance}
-            />
-          )}
-        </Collapse>
+        <MRT_TableHeadCellFilterContainer
+          header={header}
+          tableInstance={tableInstance}
+        />
       )}
     </TableCell>
   );

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { Collapse } from '@mui/material';
+import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
+import { MRT_FILTER_OPTION } from '../enums';
+import { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
+  const { getState } = tableInstance;
+
+  const { currentFilterFns, showFilters } = getState();
+
+  const { column } = header;
+
+  return (
+    <Collapse in={showFilters} mountOnEnter unmountOnExit>
+      {currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? (
+        <MRT_FilterRangeFields header={header} tableInstance={tableInstance} />
+      ) : (
+        <MRT_FilterTextField header={header} tableInstance={tableInstance} />
+      )}
+    </Collapse>
+  );
+};

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -0,0 +1,82 @@
+import React, { FC, MouseEvent } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
+  const {
+    getState,
+    options: {
+      icons: { FilterAltIcon, FilterAltOff },
+      localization,
+    },
+    setShowFilters,
+  } = tableInstance;
+
+  const { showFilters } = getState();
+
+  const { column } = header;
+
+  const filterFn = getState()?.currentFilterFns?.[header.id];
+
+  const filterTooltip = !!column.getFilterValue()
+    ? localization.filteringByColumn
+        .replace('{column}', String(column.columnDef.header))
+        .replace(
+          '{filterType}',
+          filterFn instanceof Function
+            ? ''
+            : // @ts-ignore
+              localization[
+                `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
+              ],
+        )
+        .replace(
+          '{filterValue}',
+          `"${
+            Array.isArray(column.getFilterValue())
+              ? (column.getFilterValue() as [string, string]).join(
+                  `" ${localization.and} "`,
+                )
+              : (column.getFilterValue() as string)
+          }"`,
+        )
+        .replace('" "', '')
+    : localization.showHideFilters;
+
+  return (
+    <Tooltip arrow placement="top" title={filterTooltip}>
+      <IconButton
+        disableRipple
+        onClick={(event: MouseEvent<HTMLButtonElement>) => {
+          event.stopPropagation();
+          setShowFilters(!showFilters);
+        }}
+        size="small"
+        sx={{
+          m: 0,
+          opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
+          p: '2px',
+          transition: 'all 0.2s ease-in-out',
+          '&:hover': {
+            backgroundColor: 'transparent',
+            opacity: 0.8,
+          },
+        }}
+      >
+        {showFilters && !column.getFilterValue() ? (
+          <FilterAltOff />
+        ) : (
+          <FilterAltIcon />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -0,0 +1,52 @@
+import { IconButton, Tooltip } from '@mui/material';
+import React, { FC, forwardRef, Ref } from 'react';
+import { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  ref: Ref<HTMLButtonElement>;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TableHeadCellGrabHandle: FC<Props> = forwardRef(
+  ({ tableInstance }, ref) => {
+    const {
+      options: {
+        icons: { DragHandleIcon },
+        localization,
+      },
+    } = tableInstance;
+
+    return (
+      <Tooltip
+        arrow
+        enterDelay={1000}
+        enterNextDelay={1000}
+        placement="top"
+        title={localization.grab}
+      >
+        <IconButton
+          disableRipple
+          ref={ref}
+          size="small"
+          sx={{
+            cursor: 'grab',
+            m: 0,
+            opacity: 0.5,
+            p: '2px',
+            transition: 'all 0.2s ease-in-out',
+            '&:hover': {
+              backgroundColor: 'transparent',
+              opacity: 1,
+            },
+            '&:active': {
+              cursor: 'grabbing',
+            },
+          }}
+        >
+          <DragHandleIcon />
+        </IconButton>
+      </Tooltip>
+    );
+  },
+);