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

package/dist/index.d.ts

@@ -615,7 +615,7 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
         table: MRT_TableInstance<TData>;
     }) => 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
@@ -634,7 +634,7 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
      */
     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>>;
     /**

package/dist/index.esm.js

@@ -424,7 +424,7 @@ const MRT_TableBodyCellValue = ({ cell, table, }) => {
     }
     if (enableFilterMatchHighlighting &&
         columnDef.enableFilterMatchHighlighting !== false &&
-        renderedCellValue &&
+        String(renderedCellValue) &&
         allowedTypes.includes(typeof renderedCellValue) &&
         ((filterValue &&
             allowedTypes.includes(typeof filterValue) &&
@@ -617,7 +617,7 @@ const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
     var { cell, measureElement, numRows, rowIndex, rowRef, table, virtualIndex } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowIndex", "rowRef", "table", "virtualIndex"]);
     const theme = useTheme();
-    const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberDisplayMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { getState, options: { columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberDisplayMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -648,7 +648,9 @@ const MRT_TableBodyCell = (_a) => {
         const isFirstColumn = getIsFirstColumn(column, table);
         const isLastColumn = getIsLastColumn(column, table);
         const isLastRow = numRows && rowIndex === numRows - 1;
-        const borderStyle = columnSizingInfo.isResizingColumn === column.id
+        const showResizeBorder = columnSizingInfo.isResizingColumn === column.id &&
+            columnResizeMode === 'onChange';
+        const borderStyle = showResizeBorder
             ? `2px solid ${draggingBorderColor} !important`
             : isDraggingColumn || isDraggingRow
                 ? `1px dashed ${theme.palette.grey[500]} !important`
@@ -657,7 +659,7 @@ const MRT_TableBodyCell = (_a) => {
                     columnSizingInfo.isResizingColumn === column.id
                     ? `2px dashed ${draggingBorderColor} !important`
                     : undefined;
-        if (columnSizingInfo.isResizingColumn === column.id) {
+        if (showResizeBorder) {
             return { borderRight: borderStyle };
         }
         return borderStyle
@@ -1918,7 +1920,7 @@ const MRT_TableHeadCellResizeHandle = (_a) => {
         }, 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: density === 'compact'
@@ -1969,7 +1971,7 @@ const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const theme = useTheme();
-    const { getState, options: { columnFilterDisplayMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
@@ -1999,15 +2001,17 @@ const MRT_TableHeadCell = (_a) => {
         return pl;
     }, [showColumnActions, showDragHandle]);
     const draggingBorders = useMemo(() => {
-        const borderStyle = columnSizingInfo.isResizingColumn === column.id &&
-            !header.subHeaders.length
+        const showResizeBorder = columnSizingInfo.isResizingColumn === column.id &&
+            columnResizeMode === 'onChange' &&
+            !header.subHeaders.length;
+        const borderStyle = showResizeBorder
             ? `2px solid ${draggingBorderColor} !important`
             : (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
                 ? `1px dashed ${theme.palette.grey[500]}`
                 : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                     ? `2px dashed ${draggingBorderColor}`
                     : undefined;
-        if (columnSizingInfo.isResizingColumn === column.id) {
+        if (showResizeBorder) {
             return { borderRight: borderStyle };
         }
         const draggingBorders = borderStyle
@@ -2620,11 +2624,14 @@ const MRT_Table = (_a) => {
     const tableProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableProps, { table })), rest);
     const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
     const columnSizeVars = useMemo(() => {
+        var _a;
         const headers = getFlatHeaders();
         const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
-            const colSize = header.getSize();
+            let colSize = header.getSize();
+            if ((_a = header.subHeaders) === null || _a === void 0 ? void 0 : _a.length)
+                colSize = colSize * 1.05 + header.subHeaders.length * 2;
             colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
             colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
         }
@@ -3220,7 +3227,7 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
     const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
@@ -3228,13 +3235,11 @@ const useMRT_TableOptions = (_a) => {
     const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
     const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
     const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [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) {
         enableStickyHeader = true;