material-react-table 0.8.0 → 0.8.1

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import { TableSortLabel, Tooltip } from '@mui/material';
+import { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TableHeadCellSortLabel: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
+  const {
+    options: { localization },
+  } = tableInstance;
+
+  const { column } = header;
+
+  const sortTooltip = !!column.getIsSorted()
+    ? column.getIsSorted() === 'desc'
+      ? localization.sortedByColumnDesc.replace(
+          '{column}',
+          column.columnDef.header,
+        )
+      : localization.sortedByColumnAsc.replace(
+          '{column}',
+          column.columnDef.header,
+        )
+    : localization.unsorted;
+
+  return (
+    <Tooltip arrow placement="top" title={sortTooltip}>
+      <TableSortLabel
+        aria-label={sortTooltip}
+        active={!!column.getIsSorted()}
+        direction={
+          column.getIsSorted()
+            ? (column.getIsSorted() as 'asc' | 'desc')
+            : undefined
+        }
+      />
+    </Tooltip>
+  );
+};

package/src/head/MRT_TableHeadRow.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { alpha, lighten, TableRow } from '@mui/material';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import { MRT_DraggableTableHeadCell } from './MRT_DraggableTableHeadCell';
 import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
@@ -10,7 +11,7 @@ interface Props {
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
   const {
-    options: { muiTableHeadRowProps },
+    options: { enableColumnOrdering, enableGrouping, muiTableHeadRowProps },
   } = tableInstance;
 
   const tableRowProps =
@@ -27,13 +28,21 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
         ...(tableRowProps?.sx as any),
       })}
     >
-      {headerGroup.headers.map((header: MRT_Header, index) => (
-        <MRT_TableHeadCell
-          header={header}
-          key={header.id || index}
-          tableInstance={tableInstance}
-        />
-      ))}
+      {headerGroup.headers.map((header: MRT_Header, index) =>
+        enableColumnOrdering || enableGrouping ? (
+          <MRT_DraggableTableHeadCell
+            header={header}
+            key={header.id || index}
+            tableInstance={tableInstance}
+          />
+        ) : (
+          <MRT_TableHeadCell
+            header={header}
+            key={header.id || index}
+            tableInstance={tableInstance}
+          />
+        ),
+      )}
     </TableRow>
   );
 };

package/src/icons.ts

@@ -6,6 +6,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import DensityMediumIcon from '@mui/icons-material/DensityMedium';
 import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import EditIcon from '@mui/icons-material/Edit';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@@ -36,6 +37,7 @@ export interface MRT_Icons {
   DensityMediumIcon: any;
   DensitySmallIcon: any;
   DoubleArrowDownIcon: any;
+  DragHandleIcon: any;
   DynamicFeedIcon: any;
   EditIcon: any;
   ExpandLessIcon: any;
@@ -67,6 +69,7 @@ export const MRT_Default_Icons: MRT_Icons = {
   DensityMediumIcon,
   DensitySmallIcon,
   DoubleArrowDownIcon,
+  DragHandleIcon,
   DynamicFeedIcon,
   EditIcon,
   ExpandLessIcon,

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -8,7 +8,7 @@ interface Props {
   tableInstance: MRT_TableInstance;
 }
 
-const MRT_FilterRangeFields: FC<Props> = ({ header, tableInstance }) => {
+export const MRT_FilterRangeFields: FC<Props> = ({ header, tableInstance }) => {
   const {
     options: { localization },
   } = tableInstance;
@@ -37,5 +37,3 @@ const MRT_FilterRangeFields: FC<Props> = ({ header, tableInstance }) => {
     </Box>
   );
 };
-
-export default MRT_FilterRangeFields;

package/src/localization.ts

@@ -27,6 +27,7 @@ export interface MRT_Localization {
   filterNotEquals: string;
   filterStartsWith: string;
   filteringByColumn: string;
+  grab: string;
   groupByColumn: string;
   groupedBy: string;
   hideAll: string;
@@ -93,6 +94,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   filterNotEquals: 'Not Equals',
   filterStartsWith: 'Starts With',
   filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+  grab: 'Grab',
   groupByColumn: 'Group by {column}',
   groupedBy: 'Grouped by ',
   hideAll: 'Hide all',

package/src/table/MRT_TablePaper.tsx

@@ -1,5 +1,7 @@
 import React, { FC, useEffect } from 'react';
 import { Paper } from '@mui/material';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 import { MRT_TableContainer } from './MRT_TableContainer';
@@ -35,27 +37,29 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
       : muiTablePaperProps;
 
   return (
-    <Paper
-      elevation={2}
-      {...tablePaperProps}
-      sx={{
-        transition: 'all 0.2s ease-in-out',
-        ...tablePaperProps?.sx,
-      }}
-      style={{
-        height: isFullScreen ? '100vh' : undefined,
-        margin: isFullScreen ? '0' : undefined,
-        maxHeight: isFullScreen ? '100vh' : undefined,
-        maxWidth: isFullScreen ? '100vw' : undefined,
-        padding: isFullScreen ? '0' : undefined,
-        width: isFullScreen ? '100vw' : undefined,
-      }}
-    >
-      {enableToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
-      <MRT_TableContainer tableInstance={tableInstance} />
-      {enableToolbarBottom && (
-        <MRT_ToolbarBottom tableInstance={tableInstance} />
-      )}
-    </Paper>
+    <DndProvider backend={HTML5Backend}>
+      <Paper
+        elevation={2}
+        {...tablePaperProps}
+        sx={{
+          transition: 'all 0.2s ease-in-out',
+          ...tablePaperProps?.sx,
+        }}
+        style={{
+          height: isFullScreen ? '100vh' : undefined,
+          margin: isFullScreen ? '0' : undefined,
+          maxHeight: isFullScreen ? '100vh' : undefined,
+          maxWidth: isFullScreen ? '100vw' : undefined,
+          padding: isFullScreen ? '0' : undefined,
+          width: isFullScreen ? '100vw' : undefined,
+        }}
+      >
+        {enableToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
+        <MRT_TableContainer tableInstance={tableInstance} />
+        {enableToolbarBottom && (
+          <MRT_ToolbarBottom tableInstance={tableInstance} />
+        )}
+      </Paper>
+    </DndProvider>
   );
 };

package/src/table/MRT_TableRoot.tsx

@@ -222,6 +222,12 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.data, props.state?.isLoading, props.state?.showSkeletons],
   );
 
+  const [columnOrder, setColumnOrder] = useState<string[]>(() =>
+    initialState?.columnOrder ?? props.enableColumnOrdering
+      ? getAllLeafColumnDefs(columns as MRT_ColumnDef[]).map((c) => c.id)
+      : [],
+  );
+
   //@ts-ignore
   const tableInstance = {
     //@ts-ignore
@@ -237,6 +243,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       getSubRows: (row) => (row as MRT_Row)?.subRows,
       //@ts-ignore
       globalFilterFn: currentGlobalFilterFn,
+      onColumnOrderChange: setColumnOrder,
       onPaginationChange: (updater: any) =>
         setPagination((old) => functionalUpdate(updater, old)),
       ...props,
@@ -246,6 +253,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       idPrefix,
       initialState,
       state: {
+        columnOrder,
         currentEditingCell,
         currentEditingRow,
         currentFilterFns,