material-react-table-narender 2.13.35 → 2.13.36

package/dist/index.d.ts

@@ -601,6 +601,7 @@ interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> extends Omi
      * header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
      */
     header: string;
+    tooltip?: string;
     /**
      * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
      *
@@ -1328,6 +1329,7 @@ declare function defaultDisplayColumnProps<TData extends MRT_RowData>({ header,
     readonly filterSelectOptions?: DropdownOption[];
     readonly filterVariant?: "autocomplete" | "checkbox" | "date" | "date-range" | "datetime" | "datetime-range" | "multi-select" | "range" | "range-slider" | "select" | "text" | "time" | "time-range";
     readonly grow?: boolean | number;
+    readonly tooltip?: string;
     readonly muiColumnActionsButtonProps?: _mui_material.IconButtonProps | ((props: {
         column: MRT_Column<TData, unknown>;
         table: MRT_TableInstance<TData>;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, aggregationFns, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
-import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import IconButton from '@mui/material/IconButton';
@@ -52,7 +52,7 @@ import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Paper from '@mui/material/Paper';
-import { useTheme as useTheme$1 } from '@mui/material';
+import { Tooltip as Tooltip$1, useTheme as useTheme$1 } from '@mui/material';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -2420,7 +2420,7 @@ const MRT_TableDetailPanel = (_a) => {
 };
 
 const MRT_TableBodyRow = (_a) => {
-    var _b, _c, _d, _f, _g;
+    var _b, _c, _d, _f;
     var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
     const theme = useTheme();
     const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
@@ -2478,8 +2478,7 @@ const MRT_TableBodyRow = (_a) => {
                 ? `${lighten(baseBackgroundColor, 0.3)}`
                 : `${darken(baseBackgroundColor, 0.3)}`
         : undefined;
-    console.log('row.id', row);
-    return (jsxs(Fragment, { children: [createElement(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
+    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
                     if (node) {
                         rowRef.current = node;
                         rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
@@ -2500,30 +2499,27 @@ const MRT_TableBodyRow = (_a) => {
                         : topPinnedIndex !== undefined && isRowPinned
                             ? `${topPinnedIndex * rowHeight +
                                 (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
-                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned ? 2 : 0 }, sx)), key: (_g = row === null || row === void 0 ? void 0 : row.original) === null || _g === void 0 ? void 0 : _g.id }),
-                virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
-                (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
-                    let cell = cellOrVirtualCell;
-                    if (columnVirtualizer) {
-                        staticColumnIndex = cellOrVirtualCell.index;
-                        cell = visibleCells[staticColumnIndex];
-                    }
-                    const props = {
-                        cell,
-                        numRows,
-                        rowRef,
-                        staticColumnIndex,
-                        staticRowIndex,
-                        table,
-                    };
-                    return cell ? (memoMode === 'cells' &&
-                        cell.column.columnDef.columnDefType === 'data' &&
-                        !draggingColumn &&
-                        !draggingRow &&
-                        (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
-                        (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id))) : null;
-                }),
-                virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowVirtualizer: rowVirtualizer, staticRowIndex: staticRowIndex, table: table, virtualRow: virtualRow }))] }));
+                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned ? 2 : 0 }, sx)), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
+                        let cell = cellOrVirtualCell;
+                        if (columnVirtualizer) {
+                            staticColumnIndex = cellOrVirtualCell.index;
+                            cell = visibleCells[staticColumnIndex];
+                        }
+                        const props = {
+                            cell,
+                            numRows,
+                            rowRef,
+                            staticColumnIndex,
+                            staticRowIndex,
+                            table,
+                        };
+                        return cell ? (memoMode === 'cells' &&
+                            cell.column.columnDef.columnDefType === 'data' &&
+                            !draggingColumn &&
+                            !draggingRow &&
+                            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
+                            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id))) : null;
+                    }), virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowVirtualizer: rowVirtualizer, staticRowIndex: staticRowIndex, table: table, virtualRow: virtualRow }))] }));
 };
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
 
@@ -3556,7 +3552,7 @@ const MRT_TableHeadCellSortLabel = (_a) => {
 };
 
 const MRT_TableHeadCell = (_a) => {
-    var _b, _c, _d, _f, _g, _h;
+    var _b, _c, _d, _f, _g, _h, _j;
     var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
     const theme = useTheme();
     const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, 
@@ -3645,6 +3641,7 @@ const MRT_TableHeadCell = (_a) => {
         header,
         table,
     })) !== null && _b !== void 0 ? _b : columnDef.header;
+    const headerTooltip = (_c = columnDef.tooltip) !== null && _c !== void 0 ? _c : columnDef.header;
     return (jsxs(TableCell, Object.assign({ align: columnDefType === 'group'
             ? 'center'
             : theme.direction === 'rtl'
@@ -3689,7 +3686,7 @@ const MRT_TableHeadCell = (_a) => {
             theme,
         })), draggingBorders)), children: [header.isPlaceholder
                 ? null
-                : ((_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
+                : ((_d = tableCellProps.children) !== null && _d !== void 0 ? _d : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
@@ -3712,17 +3709,17 @@ const MRT_TableHeadCell = (_a) => {
                                 pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
                                     ? `${headerPL}rem`
                                     : undefined,
-                            }, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                                        '&:hover': {
-                                            textOverflow: 'clip',
-                                        },
-                                        minWidth: `${Math.min((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0, 4)}ch`,
-                                        overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
-                                            ? 'nowrap'
-                                            : 'normal',
-                                    }, children: HeaderElement }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: {
+                            }, children: [jsx(Tooltip$1, { title: headerTooltip, placement: "top", arrow: true, children: jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                                            '&:hover': {
+                                                textOverflow: 'clip',
+                                            },
+                                            minWidth: `${Math.min((_g = (_f = columnDef.header) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0, 4)}ch`,
+                                            overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: ((_j = (_h = columnDef.header) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0) < 20
+                                                ? 'nowrap'
+                                                : 'normal',
+                                        }, children: HeaderElement }) }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: {
                                 whiteSpace: 'nowrap',
                             }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                                         current: tableHeadCellRefs.current[column.id],