material-react-table 0.8.0-alpha.2 → 0.8.2

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>
+    );
+  },
+);

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { Divider, Theme } from '@mui/material';
+import { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
+  const { getState } = tableInstance;
+
+  const { showFilters } = getState();
+
+  const { column } = header;
+
+  return (
+    <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',
+      }}
+    />
+  );
+};

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_TableContainer.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
 import { TableContainer } from '@mui/material';
-import { MRT_TableInstance } from '..';
 import { MRT_Table } from './MRT_Table';
+import type { MRT_TableInstance } from '..';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;

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,

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