material-react-table 2.0.0-rc.0 → 2.0.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -66,9 +66,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.2.0",
-    "@mui/icons-material": "^5.14.14",
-    "@mui/material": "^5.14.14",
-    "@mui/x-date-pickers": "^6.16.3",
+    "@mui/icons-material": "^5.14.15",
+    "@mui/material": "^5.14.15",
+    "@mui/x-date-pickers": "^6.17.0",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^10.0.1",
     "@storybook/addon-a11y": "^7.5.1",
@@ -80,8 +80,8 @@
     "@storybook/react": "^7.5.1",
     "@storybook/react-vite": "^7.5.1",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.8.8",
-    "@types/react": "^18.2.31",
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",

package/src/body/MRT_TableBodyCell.tsx

@@ -50,6 +50,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   const {
     getState,
     options: {
+      columnResizeMode,
       createDisplayMode,
       editDisplayMode,
       enableClickToCopy,
@@ -118,19 +119,21 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     const isFirstColumn = getIsFirstColumn(column, table);
     const isLastColumn = getIsLastColumn(column, table);
     const isLastRow = numRows && rowIndex === numRows - 1;
+    const showResizeBorder =
+      columnSizingInfo.isResizingColumn === column.id &&
+      columnResizeMode === 'onChange';
 
-    const borderStyle =
-      columnSizingInfo.isResizingColumn === column.id
-        ? `2px solid ${draggingBorderColor} !important`
-        : isDraggingColumn || isDraggingRow
-        ? `1px dashed ${theme.palette.grey[500]} !important`
-        : isHoveredColumn ||
-          isHoveredRow ||
-          columnSizingInfo.isResizingColumn === column.id
-        ? `2px dashed ${draggingBorderColor} !important`
-        : undefined;
+    const borderStyle = showResizeBorder
+      ? `2px solid ${draggingBorderColor} !important`
+      : isDraggingColumn || isDraggingRow
+      ? `1px dashed ${theme.palette.grey[500]} !important`
+      : isHoveredColumn ||
+        isHoveredRow ||
+        columnSizingInfo.isResizingColumn === column.id
+      ? `2px dashed ${draggingBorderColor} !important`
+      : undefined;
 
-    if (columnSizingInfo.isResizingColumn === column.id) {
+    if (showResizeBorder) {
       return { borderRight: borderStyle };
     }
 

package/src/body/MRT_TableBodyCellValue.tsx

@@ -56,7 +56,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   if (
     enableFilterMatchHighlighting &&
     columnDef.enableFilterMatchHighlighting !== false &&
-    renderedCellValue &&
+    String(renderedCellValue) &&
     allowedTypes.includes(typeof renderedCellValue) &&
     ((filterValue &&
       allowedTypes.includes(typeof filterValue) &&

package/src/head/MRT_TableHeadCell.tsx

@@ -32,6 +32,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     getState,
     options: {
       columnFilterDisplayMode,
+      columnResizeMode,
       enableColumnActions,
       enableColumnDragging,
       enableColumnOrdering,
@@ -88,17 +89,20 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   }, [showColumnActions, showDragHandle]);
 
   const draggingBorders = useMemo(() => {
-    const borderStyle =
+    const showResizeBorder =
       columnSizingInfo.isResizingColumn === column.id &&
-      !header.subHeaders.length
-        ? `2px solid ${draggingBorderColor} !important`
-        : draggingColumn?.id === column.id
-        ? `1px dashed ${theme.palette.grey[500]}`
-        : hoveredColumn?.id === column.id
-        ? `2px dashed ${draggingBorderColor}`
-        : undefined;
+      columnResizeMode === 'onChange' &&
+      !header.subHeaders.length;
 
-    if (columnSizingInfo.isResizingColumn === column.id) {
+    const borderStyle = showResizeBorder
+      ? `2px solid ${draggingBorderColor} !important`
+      : draggingColumn?.id === column.id
+      ? `1px dashed ${theme.palette.grey[500]}`
+      : hoveredColumn?.id === column.id
+      ? `2px dashed ${draggingBorderColor}`
+      : undefined;
+
+    if (showResizeBorder) {
       return { borderRight: borderStyle };
     }
     const draggingBorders = borderStyle

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -46,7 +46,8 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
       sx={(theme) => ({
         '&:active > hr': {
           backgroundColor: theme.palette.info.main,
-          opacity: header.subHeaders.length ? 1 : 0,
+          opacity:
+            header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
         },
         cursor: 'col-resize',
         mr:

package/src/hooks/useMRT_TableOptions.ts

@@ -73,7 +73,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableTopToolbar = true,
   filterFns,
   icons,
-  layoutMode = 'semantic',
+  layoutMode,
   localization,
   manualFiltering,
   manualGrouping,
@@ -118,13 +118,13 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     [defaultDisplayColumn],
   );
 
-  if (layoutMode === 'semantic') {
-    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
-      layoutMode = 'grid';
-    }
-    if (enableColumnResizing) {
-      layoutMode = 'grid-no-grow';
-    }
+  layoutMode =
+    layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
+  if (
+    layoutMode === 'semantic' &&
+    (rest.enableRowVirtualization || rest.enableColumnVirtualization)
+  ) {
+    layoutMode = 'grid';
   }
 
   if (rest.enableRowVirtualization) {

package/src/table/MRT_Table.tsx

@@ -65,7 +65,9 @@ export const MRT_Table = <TData extends MRT_RowData>({
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      const colSize = header.getSize();
+      let colSize = header.getSize();
+      if (header.subHeaders?.length)
+        colSize = colSize * 1.05 + header.subHeaders.length * 2;
       colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
       colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }

package/src/types.ts

@@ -714,7 +714,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
       }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>)
     | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
   /**
-   * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
+   * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` table option.
    *
    * See more info on creating columns on the official docs site:
    * @link https://www.material-react-table.com/docs/guides/data-columns
@@ -733,7 +733,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
    */
   data: TData[];
   /**
-   * Instead of specifying a bunch of the same options for each column, you can just change an option in the `defaultColumn` prop to change a default option for all columns.
+   * Instead of specifying a bunch of the same options for each column, you can just change an option in the `defaultColumn` table option to change a default option for all columns.
    */
   defaultColumn?: Partial<MRT_ColumnDef<TData>>;
   /**