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

package/src/head/MRT_TableHeadCell.tsx

@@ -1,42 +1,43 @@
-import React, { FC, MouseEvent } 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,44 +56,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
     ...mcTableHeadCellProps,
   };
 
-  const sortTooltip = !!column.getIsSorted()
-    ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace('{column}', column.header)
-      : localization.sortedByColumnAsc.replace('{column}', column.header)
-    : localization.unsorted;
-
-  const filterFn = getState()?.currentFilterFns?.[header.id];
-
-  const filterTooltip = !!column.getFilterValue()
-    ? localization.filteringByColumn
-        .replace('{column}', String(column.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?.Header?.({
-      header,
-      tableInstance,
-    }) ?? column.header;
+  const headerElement = (column.columnDef?.Header?.({
+    header,
+    tableInstance,
+  }) ?? header.renderHeader()) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
     return (
@@ -113,12 +80,13 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       150
     );
   };
-
+  console.log(column.getCanGroup());
   return (
     <TableCell
       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'
@@ -136,8 +104,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
-        maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${column.minSize}px)`,
         overflow: 'visible',
         p: isDensePadding
           ? column.columnDefType === 'display'
@@ -161,7 +127,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         verticalAlign: 'text-top',
-        width: header.getSize(),
         zIndex: column.getIsResizing()
           ? 3
           : column.getIsPinned() && column.columnDefType !== 'group'
@@ -169,16 +134,23 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           : 1,
         ...(tableCellProps?.sx as any),
       })}
+      style={{
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        width: header.getSize(),
+      }}
     >
       {header.isPlaceholder ? null : column.columnDefType === 'display' ? (
         headerElement
       ) : (
         <Box
+          ref={previewRef}
           sx={{
             alignItems: 'flex-start',
             display: 'flex',
             justifyContent:
               column.columnDefType === 'group' ? 'center' : 'space-between',
+            opacity: isDragging ? 0.5 : 1,
             width: '100%',
           }}
         >
@@ -192,114 +164,61 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                   : undefined,
               display: 'flex',
               flexWrap: 'nowrap',
-              whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal',
+              whiteSpace:
+                (column.columnDef.header?.length ?? 0) < 24
+                  ? 'nowrap'
+                  : 'normal',
             }}
           >
             {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: '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>
+    );
+  },
+);

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

@@ -73,7 +73,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-      placeholder={column.header}
+      placeholder={column.columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}

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;