material-react-table 0.8.0-alpha.1 → 0.8.1

package/src/inputs/MRT_FilterTextField.tsx

@@ -130,7 +130,10 @@ export const MRT_FilterTextField: FC<Props> = ({
       : '';
   const filterPlaceholder =
     inputIndex === undefined
-      ? localization.filterByColumn?.replace('{column}', String(column.header))
+      ? localization.filterByColumn?.replace(
+          '{column}',
+          String(column.columnDef.header),
+        )
       : inputIndex === 0
       ? localization.min
       : inputIndex === 1

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -25,7 +25,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     },
   } = tableInstance;
 
-  const { isDensePadding, isLoading } = getState();
+  const { isDensePadding } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
@@ -70,7 +70,6 @@ export const MRT_SelectCheckbox: FC<Props> = ({
             ? tableInstance.getIsAllRowsSelected()
             : row?.getIsSelected()
         }
-        disabled={isLoading}
         indeterminate={
           selectAll
             ? tableInstance.getIsSomeRowsSelected()

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/menus/MRT_ColumnActionMenu.tsx

@@ -178,7 +178,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
           </MenuItem>,
@@ -195,7 +195,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
           </MenuItem>,
@@ -227,7 +227,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.filterByColumn?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
             {!column.filterSelectOptions && (
@@ -264,7 +264,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization[
                 column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
-              ]?.replace('{column}', String(column.header))}
+              ]?.replace('{column}', String(column.columnDef.header))}
             </Box>
           </MenuItem>,
         ]}
@@ -339,7 +339,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.hideColumn?.replace(
               '{column}',
-              String(column.header),
+              String(column.columnDef.header),
             )}
           </Box>
         </MenuItem>,
@@ -358,7 +358,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.showAllColumns?.replace(
               '{column}',
-              String(column.header),
+              String(column.columnDef.header),
             )}
           </Box>
           <IconButton

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -63,7 +63,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           checked={switchChecked}
           control={<Switch />}
           disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
-          label={column.header}
+          label={column.columnDef.header}
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>

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,29 +222,28 @@ 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
     ...useTableInstance(table, {
       filterFns: defaultFilterFNs,
-      //@ts-ignore
       getCoreRowModel: getCoreRowModel(),
-      //@ts-ignore
       getExpandedRowModel: getExpandedRowModel(),
-      //@ts-ignore
       getFacetedRowModel: getFacetedRowModel(),
-      //@ts-ignore
       getFilteredRowModel: getFilteredRowModel(),
-      //@ts-ignore
       getGroupedRowModel: getGroupedRowModel(),
-      //@ts-ignore
       getPaginationRowModel: getPaginationRowModel(),
-      //@ts-ignore
       getSortedRowModel: getSortedRowModel(),
-      //@ts-ignore
-      getSubRows: (row) => row?.subRows,
+      getSubRows: (row) => (row as MRT_Row)?.subRows,
       //@ts-ignore
       globalFilterFn: currentGlobalFilterFn,
+      onColumnOrderChange: setColumnOrder,
       onPaginationChange: (updater: any) =>
         setPagination((old) => functionalUpdate(updater, old)),
       ...props,
@@ -254,6 +253,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       idPrefix,
       initialState,
       state: {
+        columnOrder,
         currentEditingCell,
         currentEditingRow,
         currentFilterFns,

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,29 +1,25 @@
 import React, { FC, Fragment } from 'react';
-import { Alert, Box, Chip, Collapse, useMediaQuery } from '@mui/material';
+import { Alert, Box, Chip, Collapse } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
+  stackAlertBanner?: boolean;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
+export const MRT_ToolbarAlertBanner: FC<Props> = ({
+  stackAlertBanner,
+  tableInstance,
+}) => {
   const {
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
-    options: {
-      localization,
-      muiTableToolbarAlertBannerProps,
-      positionToolbarActions,
-      positionToolbarAlertBanner,
-      renderToolbarCustomActions,
-    },
+    options: { localization, muiTableToolbarAlertBannerProps },
   } = tableInstance;
 
   const { grouping } = getState();
 
-  const isMobile = useMediaQuery('(max-width:720px)');
-
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
       ? muiTableToolbarAlertBannerProps({ tableInstance })
@@ -51,11 +47,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
             {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
-              label={
-                tableInstance
-                  .getAllColumns()
-                  .find((column) => column.id === columnId)?.header
-              }
+              label={tableInstance.getColumn(columnId).columnDef.header}
               onDelete={() =>
                 tableInstance.getColumn(columnId).toggleGrouping()
               }
@@ -65,17 +57,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
       </span>
     ) : null;
 
-  const displayAbsolute = !(
-    isMobile ||
-    (positionToolbarAlertBanner === 'bottom' &&
-      positionToolbarActions === 'bottom') ||
-    (positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions)
-  );
-
   return (
     <Collapse
       in={!!selectMessage || !!groupedByMessage}
-      timeout={displayAbsolute ? 0 : 200}
+      timeout={stackAlertBanner ? 200 : 0}
     >
       <Alert
         color="info"
@@ -85,9 +70,8 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
           fontSize: '1rem',
           left: 0,
           p: 0,
-          position: displayAbsolute ? 'absolute' : 'relative',
+          position: 'relative',
           right: 0,
-          minHeight: '3.5rem',
           top: 0,
           width: '100%',
           zIndex: 2,
@@ -97,7 +81,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
       >
         <Box sx={{ p: '0.5rem 1rem' }}>
           {selectMessage}
-          <br />
+          {selectMessage && groupedByMessage && <br />}
           {groupedByMessage}
         </Box>
       </Alert>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { alpha, Box, Toolbar } from '@mui/material';
+import { alpha, Box, Toolbar, useMediaQuery } from '@mui/material';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
@@ -22,16 +22,27 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
       positionPagination,
       positionToolbarActions,
       positionToolbarAlertBanner,
+      renderToolbarCustomActions,
     },
   } = tableInstance;
 
   const { isFullScreen } = getState();
 
+  const isMobile = useMediaQuery('(max-width:720px)');
+
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
       ? muiTableToolbarBottomProps({ tableInstance })
       : muiTableToolbarBottomProps;
 
+  const stackAlertBanner =
+    isMobile ||
+    (positionToolbarAlertBanner === 'bottom' &&
+      positionToolbarActions === 'bottom') ||
+    (positionToolbarAlertBanner === 'bottom' &&
+      !!renderToolbarCustomActions &&
+      positionToolbarActions === 'bottom');
+
   return (
     <Toolbar
       id={`mrt-${idPrefix}-toolbar-bottom`}
@@ -48,17 +59,24 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
       }
     >
       <MRT_LinearProgressBar tableInstance={tableInstance} />
+      {positionToolbarAlertBanner === 'bottom' && (
+        <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
+      )}
       <Box
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%',
+          position: stackAlertBanner ? 'relative' : 'absolute',
+          right: 0,
+          top: 0,
+        }}
       >
         {enableToolbarInternalActions && positionToolbarActions === 'bottom' ? (
           <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
         ) : (
           <span />
         )}
-        {positionToolbarAlertBanner === 'bottom' && (
-          <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
-        )}
         {enablePagination &&
           ['bottom', 'both'].includes(positionPagination ?? '') && (
             <MRT_TablePagination tableInstance={tableInstance} />

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -6,6 +6,7 @@ import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingB
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import { MRT_TableInstance } from '..';
+import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 
 interface Props {
   tableInstance: MRT_TableInstance;
@@ -24,42 +25,42 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
     },
   } = tableInstance;
 
-  if (renderToolbarInternalActions) {
-    return (
-      <>
-        {renderToolbarInternalActions({
-          MRT_FullScreenToggleButton,
-          MRT_ShowHideColumnsButton,
-          MRT_ToggleDensePaddingButton,
-          MRT_ToggleFiltersButton,
-          MRT_ToggleGlobalFilterButton,
-          tableInstance,
-        })}
-      </>
-    );
-  }
-
   return (
     <Box
       sx={{
         display: 'flex',
         alignItems: 'center',
+        zIndex: 3,
       }}
     >
-      {enableFilters && enableGlobalFilter && (
-        <MRT_ToggleGlobalFilterButton tableInstance={tableInstance} />
-      )}
-      {enableFilters && enableColumnFilters && (
-        <MRT_ToggleFiltersButton tableInstance={tableInstance} />
-      )}
-      {enableHiding && (
-        <MRT_ShowHideColumnsButton tableInstance={tableInstance} />
-      )}
-      {enableDensePaddingToggle && (
-        <MRT_ToggleDensePaddingButton tableInstance={tableInstance} />
-      )}
-      {enableFullScreenToggle && (
-        <MRT_FullScreenToggleButton tableInstance={tableInstance} />
+      {renderToolbarInternalActions?.({
+        MRT_FullScreenToggleButton,
+        MRT_ShowHideColumnsButton,
+        MRT_ToggleDensePaddingButton,
+        MRT_ToggleFiltersButton,
+        MRT_ToggleGlobalFilterButton,
+        tableInstance,
+      }) ?? (
+        <>
+          {enableGlobalFilter && (
+            <MRT_SearchTextField tableInstance={tableInstance} />
+          )}
+          {enableFilters && enableGlobalFilter && (
+            <MRT_ToggleGlobalFilterButton tableInstance={tableInstance} />
+          )}
+          {enableFilters && enableColumnFilters && (
+            <MRT_ToggleFiltersButton tableInstance={tableInstance} />
+          )}
+          {enableHiding && (
+            <MRT_ShowHideColumnsButton tableInstance={tableInstance} />
+          )}
+          {enableDensePaddingToggle && (
+            <MRT_ToggleDensePaddingButton tableInstance={tableInstance} />
+          )}
+          {enableFullScreenToggle && (
+            <MRT_FullScreenToggleButton tableInstance={tableInstance} />
+          )}
+        </>
       )}
     </Box>
   );

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
-import { Box, lighten, Theme, Toolbar } from '@mui/material';
-import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
+import { Box, lighten, Theme, Toolbar, useMediaQuery } from '@mui/material';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
@@ -11,6 +10,8 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   backgroundColor: lighten(theme.palette.background.default, 0.04),
   backgroundImage: 'none',
   display: 'grid',
+  minHeight: '3.5rem',
+  overflow: 'hidden',
   p: '0 !important',
   transition: 'all 0.2s ease-in-out',
   width: '100%',
@@ -25,7 +26,6 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
     options: {
-      enableGlobalFilter,
       enablePagination,
       enableToolbarInternalActions,
       idPrefix,
@@ -39,11 +39,17 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
 
   const { isFullScreen } = getState();
 
+  const isMobile = useMediaQuery('(max-width:720px)');
+
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
       ? muiTableToolbarTopProps({ tableInstance })
       : muiTableToolbarTopProps;
 
+  const stackAlertBanner =
+    isMobile ||
+    (positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
+
   return (
     <Toolbar
       id={`mrt-${idPrefix}-toolbar-top`}
@@ -59,31 +65,26 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
       }
     >
       {positionToolbarAlertBanner === 'top' && (
-        <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          tableInstance={tableInstance}
+        />
       )}
       <Box
         sx={{
-          p: '0.5rem',
           display: 'flex',
           justifyContent: 'space-between',
+          p: '0.5rem',
+          position: stackAlertBanner ? 'relative' : 'absolute',
+          right: 0,
+          top: 0,
+          width: 'calc(100% - 1rem)',
         }}
       >
         {renderToolbarCustomActions?.({ tableInstance }) ?? <span />}
-        <Box
-          sx={{
-            display: 'flex',
-            gap: '0.5rem',
-            position: 'relative',
-            zIndex: 3,
-          }}
-        >
-          {enableGlobalFilter && (
-            <MRT_SearchTextField tableInstance={tableInstance} />
-          )}
-          {enableToolbarInternalActions && positionToolbarActions === 'top' && (
-            <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
-          )}
-        </Box>
+        {enableToolbarInternalActions && positionToolbarActions === 'top' && (
+          <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
+        )}
       </Box>
       <div>
         {enablePagination &&