mantine-react-table
Version:
A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.
946 lines (930 loc) • 211 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useMemo, useState, memo, useEffect, useRef, Fragment as Fragment$1, useCallback, createElement, useLayoutEffect } from 'react';
import { aggregationFns, filterFns, sortingFns, flexRender as flexRender$1, createRow as createRow$1, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
import { IconArrowAutofitContent, IconArrowsSort, IconBaselineDensityLarge, IconBaselineDensityMedium, IconBaselineDensitySmall, IconBoxMultiple, IconChevronDown, IconChevronLeft, IconChevronLeftPipe, IconChevronRight, IconChevronRightPipe, IconChevronsDown, IconCircleX, IconClearAll, IconColumns, IconDeviceFloppy, IconDots, IconDotsVertical, IconEdit, IconEyeOff, IconFilter, IconFilterCog, IconFilterOff, IconGripHorizontal, IconMaximize, IconMinimize, IconPinned, IconPinnedOff, IconSearch, IconSearchOff, IconSortAscending, IconSortDescending, IconX } from '@tabler/icons-react';
import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
import { Select, TextInput, CopyButton, Tooltip, UnstyledButton, Highlight, useMantineTheme, Box, Skeleton, Collapse, Text, ActionIcon, Menu, Button, Switch, Radio, Checkbox, Flex, Progress, Pagination, Badge, MultiSelect, Autocomplete, packSx, Alert, Stack, Divider, Transition, RangeSlider, Popover, Indicator, Table, Modal, LoadingOverlay, Paper } from '@mantine/core';
import { useDebouncedValue, useMediaQuery } from '@mantine/hooks';
import { DateInput } from '@mantine/dates';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol */
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
const MRT_AggregationFns = Object.assign({}, aggregationFns);
const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
const itemRank = rankItem(row.getValue(columnId), filterValue, {
threshold: rankings.MATCHES,
});
addMeta(itemRank);
return itemRank.passed;
};
fuzzy$1.autoRemove = (val) => !val;
const contains = (row, id, filterValue) => row
.getValue(id)
.toString()
.toLowerCase()
.trim()
.includes(filterValue.toString().toLowerCase().trim());
contains.autoRemove = (val) => !val;
const startsWith = (row, id, filterValue) => row
.getValue(id)
.toString()
.toLowerCase()
.trim()
.startsWith(filterValue.toString().toLowerCase().trim());
startsWith.autoRemove = (val) => !val;
const endsWith = (row, id, filterValue) => row
.getValue(id)
.toString()
.toLowerCase()
.trim()
.endsWith(filterValue.toString().toLowerCase().trim());
endsWith.autoRemove = (val) => !val;
const equals = (row, id, filterValue) => filterValue === null
? true
: row.getValue(id).toString().toLowerCase().trim() ===
filterValue.toString().toLowerCase().trim();
equals.autoRemove = (val) => !val;
const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
filterValue.toString().toLowerCase().trim();
notEquals.autoRemove = (val) => !val;
const greaterThan = (row, id, filterValue) => filterValue === null
? true
: !isNaN(+filterValue) && !isNaN(+row.getValue(id))
? +row.getValue(id) > +filterValue
: row.getValue(id).toString().toLowerCase().trim() >
filterValue.toString().toLowerCase().trim();
greaterThan.autoRemove = (val) => !val;
const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
greaterThanOrEqualTo.autoRemove = (val) => !val;
const lessThan = (row, id, filterValue) => filterValue === null
? true
: !isNaN(+filterValue) && !isNaN(+row.getValue(id))
? +row.getValue(id) < +filterValue
: row.getValue(id).toString().toLowerCase().trim() <
filterValue.toString().toLowerCase().trim();
lessThan.autoRemove = (val) => !val;
const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
lessThanOrEqualTo.autoRemove = (val) => !val;
const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
greaterThan(row, id, filterValues[0])) &&
((!isNaN(+filterValues[0]) &&
!isNaN(+filterValues[1]) &&
+filterValues[0] > +filterValues[1]) ||
['', undefined].includes(filterValues[1]) ||
lessThan(row, id, filterValues[1]));
between.autoRemove = (val) => !val;
const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
greaterThanOrEqualTo(row, id, filterValues[0])) &&
((!isNaN(+filterValues[0]) &&
!isNaN(+filterValues[1]) &&
+filterValues[0] > +filterValues[1]) ||
['', undefined].includes(filterValues[1]) ||
lessThanOrEqualTo(row, id, filterValues[1]));
betweenInclusive.autoRemove = (val) => !val;
const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
empty.autoRemove = (val) => !val;
const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
notEmpty.autoRemove = (val) => !val;
const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
betweenInclusive,
contains,
empty,
endsWith,
equals,
fuzzy: fuzzy$1,
greaterThan,
greaterThanOrEqualTo,
lessThan,
lessThanOrEqualTo,
notEmpty,
notEquals,
startsWith });
const fuzzy = (rowA, rowB, columnId) => {
let dir = 0;
if (rowA.columnFiltersMeta[columnId]) {
dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
}
// Provide a fallback for when the item ranks are equal
return dir === 0
? sortingFns.alphanumeric(rowA, rowB, columnId)
: dir;
};
const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy });
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
const getAllLeafColumnDefs = (columns) => {
const allLeafColumnDefs = [];
const getLeafColumns = (cols) => {
cols.forEach((col) => {
if (col.columns) {
getLeafColumns(col.columns);
}
else {
allLeafColumnDefs.push(col);
}
});
};
getLeafColumns(columns);
return allLeafColumnDefs;
};
const prepareColumns = ({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
var _a, _b;
//assign columnId
if (!columnDef.id)
columnDef.id = getColumnId(columnDef);
if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
console.error('Column definitions must have a valid `accessorKey` or `id` property');
}
//assign columnDefType
if (!columnDef.columnDefType)
columnDef.columnDefType = 'data';
if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
columnDef.columnDefType = 'group';
//recursively prepare columns if this is a group column
columnDef.columns = prepareColumns({
aggregationFns,
columnDefs: columnDef.columns,
columnFilterFns,
defaultDisplayColumn,
filterFns,
sortingFns,
});
}
else if (columnDef.columnDefType === 'data') {
//assign aggregationFns if multiple aggregationFns are provided
if (Array.isArray(columnDef.aggregationFn)) {
const aggFns = columnDef.aggregationFn;
columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
}
//assign filterFns
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
columnDef.filterFn =
(_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
columnDef._filterFn =
columnFilterFns[columnDef.id];
}
//assign sortingFns
if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
// @ts-ignore
columnDef.sortingFn = sortingFns[columnDef.sortingFn];
}
}
else if (columnDef.columnDefType === 'display') {
columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
}
return columnDef;
});
const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
if (draggedColumn.getCanPin()) {
draggedColumn.pin(targetColumn.getIsPinned());
}
columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
return [...columnOrder];
};
const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
(props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
props.renderDetailPanel);
const getLeadingDisplayColumnIds = (props) => {
var _a;
return [
(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
props.positionActionsColumn === 'first' &&
(props.enableRowActions ||
(props.enableEditing &&
['row', 'modal', 'custom'].includes((_a = props.editDisplayMode) !== null && _a !== void 0 ? _a : ''))) &&
'mrt-row-actions',
props.positionExpandColumn === 'first' &&
showExpandColumn(props) &&
'mrt-row-expand',
props.enableRowSelection && 'mrt-row-select',
props.enableRowNumbers && 'mrt-row-numbers',
].filter(Boolean);
};
const getTrailingDisplayColumnIds = (props) => {
var _a;
return [
props.positionActionsColumn === 'last' &&
(props.enableRowActions ||
(props.enableEditing &&
['row', 'modal'].includes((_a = props.editDisplayMode) !== null && _a !== void 0 ? _a : ''))) &&
'mrt-row-actions',
props.positionExpandColumn === 'last' &&
showExpandColumn(props) &&
'mrt-row-expand',
].filter(Boolean);
};
const getDefaultColumnOrderIds = (props) => {
const leadingDisplayCols = getLeadingDisplayColumnIds(props);
const trailingDisplayCols = getTrailingDisplayColumnIds(props);
const allLeafColumnDefs = getAllLeafColumnDefs(props.columns)
.map((columnDef) => getColumnId(columnDef))
.filter((columnId) => !leadingDisplayCols.includes(columnId) &&
!trailingDisplayCols.includes(columnId));
return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
};
const getDefaultColumnFilterFn = (columnDef) => {
const { filterVariant } = columnDef;
if (filterVariant === 'multi-select')
return 'arrIncludesSome';
if (['range', 'date-range', 'range-slider'].includes(filterVariant || ''))
return 'betweenInclusive';
if (['select', 'checkbox', 'date'].includes(filterVariant || ''))
return 'equals';
return 'fuzzy';
};
const getIsFirstColumn = (column, table) => {
return table.getVisibleLeafColumns()[0].id === column.id;
};
const getIsLastColumn = (column, table) => {
const columns = table.getVisibleLeafColumns();
return columns[columns.length - 1].id === column.id;
};
const getIsLastLeftPinnedColumn = (table, column) => {
return (column.getIsPinned() === 'left' &&
table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
};
const getIsFirstRightPinnedColumn = (column) => {
return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
};
const getTotalRight = (table, column) => {
return table
.getRightLeafHeaders()
.slice(column.getPinnedIndex() + 1)
.reduce((acc, col) => acc + col.getSize(), 0);
};
const getCanRankRows = (table) => {
const { options, getState } = table;
const { manualExpanding, manualFiltering, manualGrouping, manualSorting, enableGlobalFilterRankedResults, } = options;
const { globalFilterFn, expanded } = getState();
return (!manualExpanding &&
!manualFiltering &&
!manualGrouping &&
!manualSorting &&
enableGlobalFilterRankedResults &&
globalFilterFn === 'fuzzy' &&
expanded !== true &&
!Object.values(expanded).some(Boolean));
};
const getCommonCellStyles = ({ column, header, isStriped, row, table, tableCellProps, theme, }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
const widthStyles = {
minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = column.columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px)`,
};
return Object.assign(Object.assign(Object.assign({ backgroundColor: row
? (row === null || row === void 0 ? void 0 : row.getIsSelected())
? theme.fn.rgba(getPrimaryColor(theme), 0.1)
: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
? theme.fn.rgba(theme.colorScheme === 'dark'
? theme.fn.darken(theme.colors.dark[7], 0.02)
: theme.white, 0.97)
: isStriped
? 'inherit'
: theme.colorScheme === 'dark'
? theme.fn.lighten(theme.colors.dark[7], 0.02)
: theme.white
: 'inherit', backgroundClip: 'padding-box', boxShadow: getIsLastLeftPinnedColumn(table, column)
? `-4px 0 8px -6px ${theme.fn.rgba(theme.black, 0.2)} inset`
: getIsFirstRightPinnedColumn(column)
? `4px 0 8px -6px ${theme.fn.rgba(theme.black, 0.2)} inset`
: undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
? `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size) 0 auto`
: undefined, left: column.getIsPinned() === 'left'
? `${column.getStart('left')}px`
: undefined, ml: table.options.enableColumnVirtualization &&
column.getIsPinned() === 'left' &&
column.getPinnedIndex() === 0
? `-${column.getSize() *
((_f = (_e = table.getState().columnPinning.left) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 1)}px`
: undefined, mr: table.options.enableColumnVirtualization &&
column.getIsPinned() === 'right' &&
column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
? `-${column.getSize() *
((_h = (_g = table.getState().columnPinning.right) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 1) *
1.2}px`
: undefined, opacity: ((_j = table.getState().draggingColumn) === null || _j === void 0 ? void 0 : _j.id) === column.id ||
((_k = table.getState().hoveredColumn) === null || _k === void 0 ? void 0 : _k.id) === column.id
? 0.5
: 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
? 'sticky'
: undefined, right: column.getIsPinned() === 'right'
? `${getTotalRight(table, column)}px`
: undefined, transition: table.options.enableColumnVirtualization
? 'none'
: `padding 100ms ease-in-out` }, (!table.options.enableColumnResizing && widthStyles)), ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
? tableCellProps.sx(theme)
: tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), (table.options.enableColumnResizing && widthStyles));
};
const MRT_DefaultColumn = {
filterVariant: 'text',
minSize: 40,
maxSize: 1000,
size: 180,
};
const MRT_DefaultDisplayColumn = {
columnDefType: 'display',
enableClickToCopy: false,
enableColumnActions: false,
enableColumnDragging: false,
enableColumnFilter: false,
enableColumnOrdering: false,
enableEditing: false,
enableGlobalFilter: false,
enableGrouping: false,
enableHiding: false,
enableResizing: false,
enableSorting: false,
};
const getPrimaryShade = (theme) => {
var _a, _b, _c, _d, _e;
return (_e = (theme.colorScheme === 'dark'
? // @ts-ignore
(_b = (_a = theme.primaryShade) === null || _a === void 0 ? void 0 : _a.dark) !== null && _b !== void 0 ? _b : theme.primaryShade
: // @ts-ignore
(_d = (_c = theme.primaryShade) === null || _c === void 0 ? void 0 : _c.light) !== null && _d !== void 0 ? _d : theme.primaryShade)) !== null && _e !== void 0 ? _e : 7;
};
const getPrimaryColor = (theme, shade) => theme.colors[theme.primaryColor][shade !== null && shade !== void 0 ? shade : getPrimaryShade(theme)];
const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
const flexRender = flexRender$1;
const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns)
.filter((c) => c.columnDefType === 'data')
.map((col) => ({
[getColumnId(col)]: '',
}))), -1, 0);
const MRT_Localization_EN = {
actions: 'Actions',
and: 'and',
cancel: 'Cancel',
changeFilterMode: 'Change filter mode',
changeSearchMode: 'Change search mode',
clearFilter: 'Clear filter',
clearSearch: 'Clear search',
clearSort: 'Clear sort',
clickToCopy: 'Click to copy',
collapse: 'Collapse',
collapseAll: 'Collapse all',
columnActions: 'Column Actions',
copiedToClipboard: 'Copied to clipboard',
dropToGroupBy: 'Drop to group by {column}',
edit: 'Edit',
expand: 'Expand',
expandAll: 'Expand all',
filterArrIncludes: 'Includes',
filterArrIncludesAll: 'Includes all',
filterArrIncludesSome: 'Includes',
filterBetween: 'Between',
filterBetweenInclusive: 'Between Inclusive',
filterByColumn: 'Filter by {column}',
filterContains: 'Contains',
filterEmpty: 'Empty',
filterEndsWith: 'Ends With',
filterEquals: 'Equals',
filterEqualsString: 'Equals',
filterFuzzy: 'Fuzzy',
filterGreaterThan: 'Greater Than',
filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
filterInNumberRange: 'Between',
filterIncludesString: 'Contains',
filterIncludesStringSensitive: 'Contains',
filterLessThan: 'Less Than',
filterLessThanOrEqualTo: 'Less Than Or Equal To',
filterMode: 'Filter Mode: {filterType}',
filterNotEmpty: 'Not Empty',
filterNotEquals: 'Not Equals',
filterStartsWith: 'Starts With',
filterWeakEquals: 'Equals',
filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
goToFirstPage: 'Go to first page',
goToLastPage: 'Go to last page',
goToNextPage: 'Go to next page',
goToPreviousPage: 'Go to previous page',
grab: 'Grab',
groupByColumn: 'Group by {column}',
groupedBy: 'Grouped by ',
hideAll: 'Hide all',
hideColumn: 'Hide {column} column',
max: 'Max',
min: 'Min',
move: 'Move',
noRecordsToDisplay: 'No records to display',
noResultsFound: 'No results found',
of: 'of',
or: 'or',
pinToLeft: 'Pin to left',
pinToRight: 'Pin to right',
resetColumnSize: 'Reset column size',
resetOrder: 'Reset order',
rowActions: 'Row Actions',
rowNumber: '#',
rowNumbers: 'Row Numbers',
rowsPerPage: 'Rows per page',
save: 'Save',
search: 'Search',
selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
select: 'Select',
showAll: 'Show all',
showAllColumns: 'Show all columns',
showHideColumns: 'Show/Hide columns',
showHideFilters: 'Show/Hide filters',
showHideSearch: 'Show/Hide search',
sortByColumnAsc: 'Sort by {column} ascending',
sortByColumnDesc: 'Sort by {column} descending',
sortedByColumnAsc: 'Sorted by {column} ascending',
sortedByColumnDesc: 'Sorted by {column} descending',
thenBy: ', then by ',
toggleDensity: 'Toggle density',
toggleFullScreen: 'Toggle full screen',
toggleSelectAll: 'Toggle select all',
toggleSelectRow: 'Toggle select row',
toggleVisibility: 'Toggle visibility',
ungroupByColumn: 'Ungroup by {column}',
unpin: 'Unpin',
unpinAll: 'Unpin all',
};
const MRT_Default_Icons = {
IconArrowAutofitContent,
IconArrowsSort,
IconBaselineDensityLarge,
IconBaselineDensityMedium,
IconBaselineDensitySmall,
IconBoxMultiple,
IconChevronDown,
IconChevronLeft,
IconChevronLeftPipe,
IconChevronRight,
IconChevronRightPipe,
IconChevronsDown,
IconCircleX,
IconClearAll,
IconColumns,
IconDeviceFloppy,
IconDots,
IconDotsVertical,
IconEdit,
IconEyeOff,
IconFilter,
IconFilterCog,
IconFilterOff,
IconGripHorizontal,
IconMaximize,
IconMinimize,
IconPinned,
IconPinnedOff,
IconSearch,
IconSearchOff,
IconSortAscending,
IconSortDescending,
IconX,
};
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, 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, enablePinning = 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', rowNumberMode = 'static', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "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)), []);
const _filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
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 (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
layoutMode = 'grid';
}
if (rest.enableRowVirtualization) {
enableStickyHeader = true;
}
if (enablePagination === false && manualPagination === undefined) {
manualPagination = true;
}
if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
manualFiltering = true;
manualGrouping = true;
manualPagination = true;
manualSorting = true;
}
return Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded,
columnFilterDisplayMode,
columnResizeMode,
createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editDisplayMode,
enableBottomToolbar,
enableColumnActions,
enableColumnFilters,
enableColumnOrdering,
enableColumnResizing,
enableDensityToggle,
enableExpandAll,
enableExpanding,
enableFilterMatchHighlighting,
enableFilters,
enableFullScreenToggle,
enableGlobalFilter,
enableGlobalFilterRankedResults,
enableGrouping,
enableHiding,
enableMultiRowSelection,
enableMultiSort,
enablePagination,
enablePinning,
enableRowSelection,
enableSelectAll,
enableSorting,
enableStickyHeader,
enableTableFooter,
enableTableHead,
enableToolbarInternalActions,
enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode, localization: _localization, manualFiltering,
manualGrouping,
manualPagination,
manualSorting,
paginationDisplayMode,
positionActionsColumn,
positionExpandColumn,
positionGlobalFilter,
positionPagination,
positionToolbarAlertBanner,
positionToolbarDropZone,
rowNumberMode,
selectAllMode, sortingFns: _sortingFns }, rest);
};
const MRT_EditCellTextInput = ({ cell, table, }) => {
var _a;
const { getState, options: { createDisplayMode, editDisplayMode, mantineEditTextInputProps, mantineEditSelectProps, }, refs: { editInputRefs }, setEditingCell, setEditingRow, setCreatingRow, } = table;
const { column, row } = cell;
const { columnDef } = column;
const { creatingRow, editingRow } = getState();
const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
const isSelectEdit = columnDef.editVariant === 'select';
const [value, setValue] = useState(() => cell.getValue());
const mTableBodyCellEditTextInputProps = mantineEditTextInputProps instanceof Function
? mantineEditTextInputProps({ cell, column, row, table })
: mantineEditTextInputProps;
const mcTableBodyCellEditTextInputProps = columnDef.mantineEditTextInputProps instanceof Function
? columnDef.mantineEditTextInputProps({
cell,
column,
row,
table,
})
: columnDef.mantineEditTextInputProps;
const textInputProps = Object.assign(Object.assign({}, mTableBodyCellEditTextInputProps), mcTableBodyCellEditTextInputProps);
const mTableBodyCellEditSelectProps = mantineEditSelectProps instanceof Function
? mantineEditSelectProps({ cell, column, row, table })
: mantineEditSelectProps;
const mcTableBodyCellEditSelectProps = columnDef.mantineEditSelectProps instanceof Function
? columnDef.mantineEditSelectProps({
cell,
column,
row,
table,
})
: columnDef.mantineEditSelectProps;
const selectProps = Object.assign(Object.assign({}, mTableBodyCellEditSelectProps), mcTableBodyCellEditSelectProps);
const saveInputValueToRowCache = (newValue) => {
//@ts-ignore
row._valuesCache[column.id] = newValue;
if (isCreating) {
setCreatingRow(row);
}
else if (isEditing) {
setEditingRow(row);
}
};
const handleBlur = (event) => {
var _a;
(_a = textInputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textInputProps, event);
saveInputValueToRowCache(value);
setEditingCell(null);
};
const handleEnterKeyDown = (event) => {
var _a, _b;
(_a = textInputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textInputProps, event);
if (event.key === 'Enter') {
(_b = editInputRefs.current[cell.id]) === null || _b === void 0 ? void 0 : _b.blur();
}
};
if (columnDef.Edit) {
return (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table });
}
const commonProps = {
disabled: (columnDef.enableEditing instanceof Function
? columnDef.enableEditing(row)
: columnDef.enableEditing) === false,
label: ['modal', 'custom'].includes((isCreating ? createDisplayMode : editDisplayMode))
? column.columnDef.header
: undefined,
name: cell.id,
placeholder: !['modal', 'custom'].includes((isCreating ? createDisplayMode : editDisplayMode))
? columnDef.header
: undefined,
value,
variant: editDisplayMode === 'table' ? 'unstyled' : 'default',
onClick: (e) => {
var _a;
e.stopPropagation();
(_a = textInputProps === null || textInputProps === void 0 ? void 0 : textInputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textInputProps, e);
},
};
if (isSelectEdit) {
return (
// @ts-ignore
jsx(Select, Object.assign({}, commonProps, { searchable: true, value: value, withinPortal: true }, selectProps, { onBlur: handleBlur, onChange: (value) => {
var _a;
(_a = selectProps.onChange) === null || _a === void 0 ? void 0 : _a.call(selectProps, value);
setValue(value);
}, onClick: (e) => {
var _a;
e.stopPropagation();
(_a = selectProps === null || selectProps === void 0 ? void 0 : selectProps.onClick) === null || _a === void 0 ? void 0 : _a.call(selectProps, e);
}, ref: (node) => {
if (node) {
editInputRefs.current[cell.id] = node;
if (selectProps.ref) {
selectProps.ref.current = node;
}
}
} })));
}
return (jsx(TextInput, Object.assign({}, commonProps, { onKeyDown: handleEnterKeyDown, value: value !== null && value !== void 0 ? value : '' }, textInputProps, { onBlur: handleBlur, onChange: (event) => {
var _a;
(_a = textInputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textInputProps, event);
setValue(event.target.value);
}, onClick: (event) => {
var _a;
event.stopPropagation();
(_a = textInputProps === null || textInputProps === void 0 ? void 0 : textInputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textInputProps, event);
}, ref: (node) => {
if (node) {
editInputRefs.current[cell.id] = node;
if (textInputProps.ref) {
textInputProps.ref.current = node;
}
}
} })));
};
const MRT_CopyButton = ({ cell, children, table, }) => {
const { options: { localization, mantineCopyButtonProps }, } = table;
const { column, row } = cell;
const { columnDef } = column;
const mTableBodyCellCopyButtonProps = mantineCopyButtonProps instanceof Function
? mantineCopyButtonProps({ cell, column, row, table })
: mantineCopyButtonProps;
const mcTableBodyCellCopyButtonProps = columnDef.mantineCopyButtonProps instanceof Function
? columnDef.mantineCopyButtonProps({
cell,
column,
row,
table,
})
: columnDef.mantineCopyButtonProps;
const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
return (jsx(CopyButton, { value: cell.getValue(), children: ({ copied, copy }) => {
var _a;
return (jsx(Tooltip, { color: copied ? 'green' : undefined, withinPortal: true, openDelay: 1000, label: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(UnstyledButton, Object.assign({}, buttonProps, { onClick: (e) => {
e.stopPropagation();
copy();
}, sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', borderRadius: '4px', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', justifyContent: 'inherit', letterSpacing: 'inherit', margin: '-4px', minWidth: 'unset', padding: '4px', textAlign: 'inherit', textTransform: 'inherit', '&:active': {
transform: 'translateY(1px)',
}, '&:hover': {
backgroundColor: theme.fn.rgba(getPrimaryColor(theme), 0.1),
} }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
? buttonProps.sx(theme)
: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined, children: children })) }));
} }));
};
const allowedTypes = ['string', 'number'];
const allowedFilterVariants = ['text', 'autocomplete'];
const MRT_TableBodyCellValue = ({ cell, table, }) => {
var _a, _b;
const { getState, options: { enableFilterMatchHighlighting, mantineHighlightProps }, } = table;
const { column, row } = cell;
const { columnDef } = column;
const { globalFilter, globalFilterFn } = getState();
const filterValue = column.getFilterValue();
const highlightProps = (mantineHighlightProps instanceof Function
? mantineHighlightProps({ cell, column, row, table })
: mantineHighlightProps);
let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
? columnDef.AggregatedCell({
cell,
column,
row,
table,
})
: row.getIsGrouped() && !cell.getIsGrouped()
? null
: cell.getIsGrouped() && columnDef.GroupedCell
? columnDef.GroupedCell({
cell,
column,
row,
table,
})
: undefined;
const isGroupedValue = renderedCellValue !== undefined;
if (!isGroupedValue) {
renderedCellValue = cell.renderValue();
}
if (enableFilterMatchHighlighting &&
columnDef.enableFilterMatchHighlighting !== false &&
renderedCellValue &&
allowedTypes.includes(typeof renderedCellValue) &&
((filterValue &&
allowedTypes.includes(typeof filterValue) &&
allowedFilterVariants.includes(columnDef.filterVariant)) ||
(globalFilter &&
allowedTypes.includes(typeof globalFilter) &&
column.getCanGlobalFilter()))) {
let highlight = ((_b = (_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : globalFilter) !== null && _b !== void 0 ? _b : '').toString();
if ((filterValue ? columnDef._filterFn : globalFilterFn) === 'fuzzy') {
highlight = highlight.split(' ');
}
renderedCellValue = (jsx(Highlight, Object.assign({ highlightColor: "yellow.3", highlight: highlight }, highlightProps, { children: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString() })));
}
if (columnDef.Cell && !isGroupedValue) {
renderedCellValue = columnDef.Cell({
cell,
renderedCellValue,
column,
row,
table,
});
}
return renderedCellValue;
};
const MRT_TableBodyCell = ({ cell, isStriped, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
var _a, _b, _c, _d;
const theme = useMantineTheme();
const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, mantineTableBodyCellProps, mantineSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
const { creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
const { column, row } = cell;
const { columnDef } = column;
const { columnDefType } = columnDef;
const mTableCellBodyProps = mantineTableBodyCellProps instanceof Function
? mantineTableBodyCellProps({ cell, column, row, table })
: mantineTableBodyCellProps;
const mcTableCellBodyProps = columnDef.mantineTableBodyCellProps instanceof Function
? columnDef.mantineTableBodyCellProps({ cell, column, row, table })
: columnDef.mantineTableBodyCellProps;
const tableCellProps = Object.assign(Object.assign({}, mTableCellBodyProps), mcTableCellBodyProps);
const skeletonProps = mantineSkeletonProps instanceof Function
? mantineSkeletonProps({ cell, column, row, table })
: mantineSkeletonProps;
const [skeletonWidth, setSkeletonWidth] = useState(100);
useEffect(() => {
if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
return;
const size = column.getSize();
setSkeletonWidth(columnDefType === 'display'
? size / 2
: Math.round(Math.random() * (size - size / 3) + size / 3));
}, [isLoading, showSkeletons]);
const draggingBorders = useMemo(() => {
const isDraggingColumn = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id;
const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
const isFirstColumn = getIsFirstColumn(column, table);
const isLastColumn = getIsLastColumn(column, table);
const isLastRow = rowIndex === numRows && numRows - 1;
const borderStyle = isDraggingColumn || isDraggingRow
? `1px dashed ${theme.colors.gray[7]} !important`
: isHoveredColumn || isHoveredRow
? `2px dashed ${getPrimaryColor(theme)} !important`
: undefined;
return borderStyle
? {
borderLeft: isDraggingColumn ||
isHoveredColumn ||
((isDraggingRow || isHoveredRow) && isFirstColumn)
? borderStyle
: undefined,
borderRight: isDraggingColumn ||
isHoveredColumn ||
((isDraggingRow || isHoveredRow) && isLastColumn)
? borderStyle
: undefined,
borderBottom: isDraggingRow || isHoveredRow || isLastRow
? borderStyle
: undefined,
borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
}
: undefined;
}, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
const isEditable = (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
(columnDef.enableEditing instanceof Function
? columnDef.enableEditing(row)
: columnDef.enableEditing) !== false;
const isEditing = isEditable &&
!['modal', 'custom'].includes(editDisplayMode) &&
(editDisplayMode === 'table' ||
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
!row.getIsGrouped();
const isCreating = isEditable && createDisplayMode === 'row' && (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
const handleDoubleClick = (event) => {
var _a;
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
if (isEditable && editDisplayMode === 'cell') {
setEditingCell(cell);
setTimeout(() => {
var _a;
const textField = editInputRefs.current[cell.id];
if (textField) {
textField.focus();
(_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
}
}, 100);
}
};
const handleDragEnter = (e) => {
var _a;
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
setHoveredColumn(null);
}
if (enableColumnOrdering && draggingColumn) {
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
}
};
return (jsxs(Box, Object.assign({ component: "td", "data-index": virtualCell === null || virtualCell === void 0 ? void 0 : virtualCell.index, ref: (node) => {
if (node) {
measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
}
} }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: layoutMode === 'grid' ? tableCellProps.align : undefined, overflow: 'hidden', paddingLeft: column.id === 'mrt-row-expand'
? `${row.depth + 1}rem !important`
: undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: density === 'xs' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
outline: isEditing &&
['table', 'cell'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '') &&
columnDefType !== 'display'
? `1px solid ${theme.colors.gray[7]}`
: undefined,
outlineOffset: '-1px',
textOverflow: 'clip',
} }, getCommonCellStyles({
column,
isStriped,
row,
table,
theme,
tableCellProps,
})), draggingBorders)), children: [jsx(Fragment, { children: cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : (isLoading || showSkeletons) &&
[undefined, null].includes(cell.getValue()) ? (jsx(Skeleton, Object.assign({ height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
rowNumberMode === 'static' &&
column.id === 'mrt-row-numbers' ? (rowIndex + 1) : columnDefType === 'display' &&
(['mrt-row-drag', 'mrt-row-expand', 'mrt-row-select'].includes(column.id) ||
!row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
cell,
column,
row,
rowRef,
renderedCellValue: jsx(Fragment, { children: cell.getValue() }),
table,
})) : isCreating || isEditing ? (jsx(MRT_EditCellTextInput, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })) }), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_d = row.subRows) === null || _d === void 0 ? void 0 : _d.length, ")"] }))] })));
};
const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow, }) => {
const { getVisibleLeafColumns, getState, options: { layoutMode, mantineTableBodyRowProps, mantineDetailPanelProps, renderDetailPanel, }, } = table;
const { isLoading } = getState();
const tableRowProps = mantineTableBodyRowProps instanceof Function
? mantineTableBodyRowProps({
isDetailPanel: true,
row,
staticRowIndex: rowIndex,
table,
})
: mantineTableBodyRowProps;
const tableCellProps = mantineDetailPanelProps instanceof Function
? mantineDetailPanelProps({ row, table })
: mantineDetailPanelProps;
return (jsx(Box, Object.assign({ component: "tr", className: "mantine-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
var _a, _b;
return (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row', position: virtualRow ? 'absolute' : undefined, top: virtualRow
? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
: undefined, transform: virtualRow
? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
: undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, ((tableRowProps ===