diff --git a/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx b/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx index 3d2e0868a..ad56db863 100644 --- a/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx +++ b/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx @@ -183,9 +183,12 @@ export const SourceCodeSnippet = ({ setColorScheme( value?.startsWith('dark') ? 'dark' : 'light', ); - value === 'darkDark' - ? setDarkDark(true) - : setDarkDark(false); + + if (value === 'darkDark') { + setDarkDark(true); + } else { + setDarkDark(false); + } plausible(`toggle-theme-${value}-mode`); }} className={classes.colorSchemeSelect} diff --git a/apps/mantine-react-table-docs/components/prop-tables/CellInstanceAPIsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/CellInstanceAPIsSource.tsx index 39f994f88..3eb3194fa 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/CellInstanceAPIsSource.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/CellInstanceAPIsSource.tsx @@ -1,5 +1,6 @@ import { Box, Text } from '@mantine/core'; import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet'; +// eslint-disable-next-line @typescript-eslint/no-require-imports const TS = require('!!raw-loader!./CellInstanceAPIsTable.tsx').default; const ExampleTable = () => { diff --git a/apps/mantine-react-table-docs/components/prop-tables/ColumnInstanceAPIsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/ColumnInstanceAPIsSource.tsx index 390ac830e..c3a099616 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/ColumnInstanceAPIsSource.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/ColumnInstanceAPIsSource.tsx @@ -1,5 +1,6 @@ import { Box, Text } from '@mantine/core'; import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet'; +// eslint-disable-next-line @typescript-eslint/no-require-imports const TS = require('!!raw-loader!./ColumnInstanceAPIsTable.tsx').default; const ExampleTable = () => { diff --git a/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsSource.tsx index 594f4771f..128a17060 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsSource.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsSource.tsx @@ -1,5 +1,6 @@ import { Box, Text } from '@mantine/core'; import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet'; +// eslint-disable-next-line @typescript-eslint/no-require-imports const TS = require('!!raw-loader!./ColumnOptionsTable.tsx').default; const ExampleTable = () => { diff --git a/apps/mantine-react-table-docs/components/prop-tables/RowInstanceAPIsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/RowInstanceAPIsSource.tsx index 162b1c2d3..90ad1cb4a 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/RowInstanceAPIsSource.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/RowInstanceAPIsSource.tsx @@ -1,5 +1,6 @@ import { Box, Text } from '@mantine/core'; import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet'; +// eslint-disable-next-line @typescript-eslint/no-require-imports const TS = require('!!raw-loader!./RowInstanceAPIsTable.tsx').default; const ExampleTable = () => { diff --git a/apps/mantine-react-table-docs/components/prop-tables/StateOptionsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/StateOptionsSource.tsx index d4ef01460..d518b0a2e 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/StateOptionsSource.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/StateOptionsSource.tsx @@ -1,5 +1,6 @@ import { Box, Text } from '@mantine/core'; import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet'; +// eslint-disable-next-line @typescript-eslint/no-require-imports const TS = require('!!raw-loader!./StateOptionsTable.tsx').default; const ExampleTable = () => { diff --git a/apps/mantine-react-table-docs/components/prop-tables/TableInstanceAPIsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/TableInstanceAPIsSource.tsx index 634a61ffd..d920d2c1b 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/TableInstanceAPIsSource.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/TableInstanceAPIsSource.tsx @@ -1,5 +1,6 @@ import { Box, Text } from '@mantine/core'; import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet'; +// eslint-disable-next-line @typescript-eslint/no-require-imports const TS = require('!!raw-loader!./TableInstanceAPIsTable.tsx').default; const ExampleTable = () => { diff --git a/apps/mantine-react-table-docs/components/prop-tables/TableOptionsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/TableOptionsSource.tsx index 32f8c0044..be74094f3 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/TableOptionsSource.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/TableOptionsSource.tsx @@ -1,5 +1,6 @@ import { Box, Text } from '@mantine/core'; import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet'; +// eslint-disable-next-line @typescript-eslint/no-require-imports const TS = require('!!raw-loader!./TableOptionsTable.tsx').default; const ExampleTable = () => { diff --git a/apps/mantine-react-table-docs/package.json b/apps/mantine-react-table-docs/package.json index b3c9a0ad1..9714692c3 100644 --- a/apps/mantine-react-table-docs/package.json +++ b/apps/mantine-react-table-docs/package.json @@ -46,7 +46,7 @@ "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "^8.8.1", "@typescript-eslint/parser": "^8.8.1", - "eslint": "9.12.0", + "eslint": "^8.57.0", "eslint-config-next": "14.2.15", "next-plausible": "^3.12.2", "postcss": "^8.4.47", diff --git a/packages/mantine-react-table/.eslintrc b/packages/mantine-react-table/.eslintrc index d4c21db4f..fa9246350 100644 --- a/packages/mantine-react-table/.eslintrc +++ b/packages/mantine-react-table/.eslintrc @@ -2,7 +2,7 @@ "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", - "plugin:perfectionist/recommended-natural" + "plugin:perfectionist/recommended-natural-legacy", ], "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint", "perfectionist"], @@ -17,8 +17,8 @@ { "prefer": "type-imports", "disallowTypeAnnotations": true, - "fixStyle": "inline-type-imports" - } + "fixStyle": "inline-type-imports", + }, ], "perfectionist/sort-imports": [ "warn", @@ -32,12 +32,9 @@ "tanstack", "mantine", "mrt", - "siblings", - "sibling-type", - "parent", - "parent-type" + ["sibling", "sibling-type", "parent", "parent-type"] ], - "custom-groups": { + "customGroups": { "value": { "clsx": "clsx", "style": ["./**.module.css"], @@ -46,16 +43,15 @@ "tanstack": "@tanstack/**", "mantine": "@mantine/**", "mrt": ["./MRT_**", "../**MRT_**", "../../src"], - "faker": "@faker/**" + "faker": "@faker/**", }, "type": { - "react": "react" - } + "react": "react", + }, }, - "newlines-between": "never" - } - ] + }, + ], }, "root": true, - "ignorePatterns": ["dist/", "locales/", "node_modules/"] + "ignorePatterns": ["dist/", "locales/", "node_modules/"], } diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json index f7bb584fa..831ad8c32 100644 --- a/packages/mantine-react-table/package.json +++ b/packages/mantine-react-table/package.json @@ -108,7 +108,7 @@ "@vitejs/plugin-react": "^4.3.2", "clsx": "^2.1.1", "dayjs": "^1.11.13", - "eslint": "^9.12.0", + "eslint": "^8.57.0", "eslint-plugin-perfectionist": "^3.8.0", "mantine-contextmenu": "^7.12.2", "postcss": "^8.4.47", diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBody.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBody.tsx index 3b020d212..8b5cea621 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBody.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBody.tsx @@ -1,14 +1,20 @@ import clsx from 'clsx'; + import classes from './MRT_TableBody.module.css'; + import { memo, useMemo } from 'react'; + import { type TableProps, TableTbody, type TableTbodyProps, } from '@mantine/core'; -import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow'; -import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer'; + +import { MRT_TableBodyEmptyRow } from './MRT_TableBodyEmptyRow'; +import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow'; + import { useMRT_Rows } from '../../hooks/useMRT_Rows'; +import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer'; import { type MRT_ColumnVirtualizer, type MRT_Row, @@ -17,7 +23,6 @@ import { type MRT_VirtualItem, } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; -import { MRT_TableBodyEmptyRow } from './MRT_TableBodyEmptyRow'; export interface MRT_TableBodyProps extends TableTbodyProps { diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx index dd94138c2..d0e1ac1f1 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx @@ -1,21 +1,26 @@ import clsx from 'clsx'; + import classes from './MRT_TableBodyCell.module.css'; + import { type CSSProperties, type DragEvent, + memo, type MouseEvent, type RefObject, - memo, useEffect, useState, } from 'react'; + import { Skeleton, TableTd, type TableTdProps, useDirection, } from '@mantine/core'; + import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue'; + import { type MRT_Cell, type MRT_CellValue, diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCellValue.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCellValue.tsx index 18cebb4a8..653492ceb 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBodyCellValue.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyCellValue.tsx @@ -1,4 +1,5 @@ import { Highlight, type HighlightProps } from '@mantine/core'; + import { type MRT_Cell, type MRT_CellValue, diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyEmptyRow.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyEmptyRow.tsx index c680fda37..0b2258ccc 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBodyEmptyRow.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyEmptyRow.tsx @@ -1,14 +1,25 @@ import clsx from 'clsx'; + import classes from './MRT_TableBody.module.css'; + import { useMemo } from 'react'; -import { type TableProps, Text, TableTd, TableTrProps } from '@mantine/core'; + +import { createRow } from '@tanstack/react-table'; + +import { + type TableProps, + TableTd, + type TableTrProps, + Text, +} from '@mantine/core'; + import { MRT_TableBodyRow } from './MRT_TableBodyRow'; + import { type MRT_Row, type MRT_RowData, type MRT_TableInstance, } from '../../types'; -import { createRow } from '@tanstack/react-table'; import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton'; interface Props extends TableTrProps { @@ -54,12 +65,12 @@ export const MRT_TableBodyEmptyRow = ({ return ( {renderDetailPanel && ( diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.tsx index 8da13085c..960ddd480 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.tsx @@ -1,14 +1,19 @@ import clsx from 'clsx'; + import classes from './MRT_TableBodyRow.module.css'; + import { type DragEvent, memo, useMemo, useRef } from 'react'; + import { Box, type TableProps, TableTr, type TableTrProps, } from '@mantine/core'; -import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell'; + +import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell'; import { MRT_TableDetailPanel } from './MRT_TableDetailPanel'; + import { type MRT_Cell, type MRT_ColumnVirtualizer, @@ -190,37 +195,39 @@ export const MRT_TableBodyRow = ({ {virtualPaddingLeft ? ( ) : null} - {children ? children : (virtualColumns ?? row.getVisibleCells()).map( - (cellOrVirtualCell, renderedColumnIndex) => { - let cell = cellOrVirtualCell as MRT_Cell; - if (columnVirtualizer) { - renderedColumnIndex = (cellOrVirtualCell as MRT_VirtualItem) - .index; - cell = visibleCells[renderedColumnIndex]; - } - const cellProps = { - cell, - numRows, - renderedColumnIndex, - renderedRowIndex, - rowRef, - table, - virtualCell: columnVirtualizer - ? (cellOrVirtualCell as MRT_VirtualItem) - : undefined, - }; - return memoMode === 'cells' && - cell.column.columnDef.columnDefType === 'data' && - !draggingColumn && - !draggingRow && - editingCell?.id !== cell.id && - editingRow?.id !== row.id ? ( - - ) : ( - - ); - }, - )} + {children + ? children + : (virtualColumns ?? row.getVisibleCells()).map( + (cellOrVirtualCell, renderedColumnIndex) => { + let cell = cellOrVirtualCell as MRT_Cell; + if (columnVirtualizer) { + renderedColumnIndex = (cellOrVirtualCell as MRT_VirtualItem) + .index; + cell = visibleCells[renderedColumnIndex]; + } + const cellProps = { + cell, + numRows, + renderedColumnIndex, + renderedRowIndex, + rowRef, + table, + virtualCell: columnVirtualizer + ? (cellOrVirtualCell as MRT_VirtualItem) + : undefined, + }; + return memoMode === 'cells' && + cell.column.columnDef.columnDefType === 'data' && + !draggingColumn && + !draggingRow && + editingCell?.id !== cell.id && + editingRow?.id !== row.id ? ( + + ) : ( + + ); + }, + )} {virtualPaddingRight ? ( ) : null} diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx index 65ba778a2..a03657312 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx @@ -1,5 +1,7 @@ import { type DragEvent, type RefObject } from 'react'; + import { type ActionIconProps } from '@mantine/core'; + import { type MRT_Row, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyRowPinButton.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyRowPinButton.tsx index b777f89fe..ba81b0e3b 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBodyRowPinButton.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyRowPinButton.tsx @@ -1,4 +1,5 @@ import { type ActionIconProps, Box } from '@mantine/core'; + import { type MRT_Row, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx b/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx index a155a1959..7d08f5a78 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_TableDetailPanel.module.css'; + import { type RefObject } from 'react'; + import { Collapse, TableTd, type TableTdProps, TableTr } from '@mantine/core'; + import { type MRT_Row, type MRT_RowData, @@ -66,7 +70,9 @@ export const MRT_TableDetailPanel = ({ )); const DetailPanel = - !isLoading && row.getIsExpanded() && renderDetailPanel?.({ row, table, internalEditComponents }); + !isLoading && + row.getIsExpanded() && + renderDetailPanel?.({ internalEditComponents, row, table }); return ( ({ const canExpand = row.getCanExpand(); const isExpanded = row.getIsExpanded(); - const DetailPanel = !!renderDetailPanel?.({ row, table, internalEditComponents }); + const DetailPanel = !!renderDetailPanel?.({ + internalEditComponents, + row, + table, + }); const handleToggleExpand = (event: MouseEvent) => { event.stopPropagation(); diff --git a/packages/mantine-react-table/src/components/buttons/MRT_GrabHandleButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_GrabHandleButton.tsx index 691b91c61..9fa024118 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_GrabHandleButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_GrabHandleButton.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_GrabHandleButton.module.css'; + import { type DragEventHandler } from 'react'; + import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core'; + import { type HTMLPropsRef, type MRT_RowData, @@ -42,13 +46,13 @@ export const MRT_GrabHandleButton = ({ actionIconProps?.className, )} color="gray" - size="sm" onClick={(e) => { e.stopPropagation(); actionIconProps?.onClick?.(e); }} onDragEnd={onDragEnd} onDragStart={onDragStart} + size="sm" title={undefined} variant="transparent" > diff --git a/packages/mantine-react-table/src/components/buttons/MRT_RowPinButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_RowPinButton.tsx index 0538493e2..040c72c1d 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_RowPinButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_RowPinButton.tsx @@ -1,6 +1,9 @@ import { type MouseEvent, useState } from 'react'; + import { type RowPinningPosition } from '@tanstack/react-table'; + import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core'; + import { type MRT_Row, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ShowHideColumnsButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ShowHideColumnsButton.tsx index 5dd9f95bc..555743f17 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_ShowHideColumnsButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_ShowHideColumnsButton.tsx @@ -1,4 +1,5 @@ import { ActionIcon, type ActionIconProps, Menu, Tooltip } from '@mantine/core'; + import { type HTMLPropsRef, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ToggleDensePaddingButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ToggleDensePaddingButton.tsx index 2797b56f4..dc4b72616 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_ToggleDensePaddingButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_ToggleDensePaddingButton.tsx @@ -1,4 +1,5 @@ import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core'; + import { type HTMLPropsRef, type MRT_DensityState, diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ToggleFiltersButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ToggleFiltersButton.tsx index 0fc952467..c39156e63 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_ToggleFiltersButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_ToggleFiltersButton.tsx @@ -1,4 +1,5 @@ import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core'; + import { type HTMLPropsRef, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx index 5322c247a..930f1ef7f 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx @@ -1,5 +1,7 @@ import { useState } from 'react'; + import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core'; + import { type HTMLPropsRef, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx index 7320c0a41..16c7cf5ef 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx @@ -1,4 +1,5 @@ import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core'; + import { type HTMLPropsRef, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx index 7b30ad7ce..74dade92d 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx @@ -1,6 +1,9 @@ import { type MouseEvent } from 'react'; + import { ActionIcon, Tooltip } from '@mantine/core'; + import { MRT_EditActionButtons } from './MRT_EditActionButtons'; + import { type MRT_Cell, type MRT_CellValue, diff --git a/packages/mantine-react-table/src/components/footer/MRT_TableFooter.tsx b/packages/mantine-react-table/src/components/footer/MRT_TableFooter.tsx index 48cb26278..9c8165b76 100644 --- a/packages/mantine-react-table/src/components/footer/MRT_TableFooter.tsx +++ b/packages/mantine-react-table/src/components/footer/MRT_TableFooter.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_TableFooter.module.css'; + import { TableTfoot, type TableTfootProps } from '@mantine/core'; + import { MRT_TableFooterRow } from './MRT_TableFooterRow'; + import { type MRT_ColumnVirtualizer, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/footer/MRT_TableFooterCell.tsx b/packages/mantine-react-table/src/components/footer/MRT_TableFooterCell.tsx index 56a41f621..658995f48 100644 --- a/packages/mantine-react-table/src/components/footer/MRT_TableFooterCell.tsx +++ b/packages/mantine-react-table/src/components/footer/MRT_TableFooterCell.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_TableFooterCell.module.css'; + import { type CSSProperties } from 'react'; + import { TableTh, type TableThProps, useDirection } from '@mantine/core'; + import { type MRT_Header, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/footer/MRT_TableFooterRow.tsx b/packages/mantine-react-table/src/components/footer/MRT_TableFooterRow.tsx index bcead9f30..423259bd2 100644 --- a/packages/mantine-react-table/src/components/footer/MRT_TableFooterRow.tsx +++ b/packages/mantine-react-table/src/components/footer/MRT_TableFooterRow.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_TableFooterRow.module.css'; + import { Box, TableTr, type TableTrProps } from '@mantine/core'; + import { MRT_TableFooterCell } from './MRT_TableFooterCell'; + import { type MRT_ColumnVirtualizer, type MRT_Header, diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHead.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHead.tsx index e2d034232..8810cc56e 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHead.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHead.tsx @@ -1,12 +1,16 @@ import clsx from 'clsx'; + import classes from './MRT_TableHead.module.css'; + import { TableTh, TableThead, type TableTheadProps, TableTr, } from '@mantine/core'; + import { MRT_TableHeadRow } from './MRT_TableHeadRow'; + import { type MRT_ColumnVirtualizer, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx index c82c5b2c8..caff5f83d 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx @@ -1,5 +1,7 @@ import clsx from 'clsx'; + import classes from './MRT_TableHeadCell.module.css'; + import { type CSSProperties, type DragEventHandler, @@ -8,12 +10,16 @@ import { useMemo, useState, } from 'react'; + import { Flex, TableTh, type TableThProps, useDirection } from '@mantine/core'; +import { useHover } from '@mantine/hooks'; + 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 { type MRT_ColumnVirtualizer, type MRT_Header, @@ -23,7 +29,6 @@ import { import { parseCSSVarId } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu'; -import { useHover } from '@mantine/hooks'; interface Props extends TableThProps { columnVirtualizer?: MRT_ColumnVirtualizer; @@ -288,9 +293,9 @@ export const MRT_TableHeadCell = ({ {columnActionsEnabled && showColumnButtons && ( )} diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterContainer.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterContainer.tsx index 27d782866..fb62eac9c 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterContainer.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterContainer.tsx @@ -1,4 +1,5 @@ import classes from './MRT_TableHeadCellFilterContainer.module.css'; + import { ActionIcon, Collapse, @@ -8,6 +9,7 @@ import { Text, Tooltip, } from '@mantine/core'; + import { localizedFilterOption } from '../../fns/filterFns'; import { type MRT_Header, diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx index c2d41fc1b..8ee20d6ca 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; + import classes from './MRT_TableHeadCellFilterLabel.module.css'; + import { type MouseEvent, useState } from 'react'; + import { ActionIcon, type ActionIconProps, @@ -8,7 +11,9 @@ import { Tooltip, Transition, } from '@mantine/core'; + import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer'; + import { localizedFilterOption } from '../../fns/filterFns'; import { type MRT_Header, diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx index bb1c18f3d..f2c640cc1 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx @@ -1,5 +1,7 @@ import { type DragEvent, type RefObject } from 'react'; + import { type ActionIconProps } from '@mantine/core'; + import { type MRT_CellValue, type MRT_Column, diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellResizeHandle.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellResizeHandle.tsx index 0c5ecc263..1506a797e 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellResizeHandle.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellResizeHandle.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; + import classes from './MRT_TableHeadCellResizeHandle.module.css'; + import { Box, type BoxProps } from '@mantine/core'; + import { type MRT_Header, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellSortLabel.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellSortLabel.tsx index 34003af9e..c34bbe8d8 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellSortLabel.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellSortLabel.tsx @@ -1,13 +1,16 @@ import clsx from 'clsx'; + import classes from './MRT_TableHeadCellSortLabel.module.css'; + import { ActionIcon, type ActionIconProps, Indicator, Tooltip, } from '@mantine/core'; -import { dataVariable } from '../../utils/style.utils'; + import type { MRT_Header, MRT_RowData, MRT_TableInstance } from '../../types'; +import { dataVariable } from '../../utils/style.utils'; interface Props extends ActionIconProps { header: MRT_Header; diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadRow.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadRow.tsx index 75b17a7f9..890fc903e 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadRow.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadRow.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_TableHeadRow.module.css'; + import { Box, TableTr, type TableTrProps } from '@mantine/core'; + import { MRT_TableHeadCell } from './MRT_TableHeadCell'; + import { type MRT_ColumnVirtualizer, type MRT_Header, diff --git a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx index ad4a0b322..9208e5d0a 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx @@ -1,12 +1,14 @@ import { type FocusEvent, type KeyboardEvent, useState } from 'react'; + import { MultiSelect, + type MultiSelectProps, Select, + type SelectProps, TextInput, type TextInputProps, - type SelectProps, - type MultiSelectProps, } from '@mantine/core'; + import { type HTMLPropsRef, type MRT_Cell, @@ -34,15 +36,15 @@ interface PropsMultiSelect table: MRT_TableInstance; } -type MRT_TextInputProps = TextInputProps & HTMLPropsRef; -type MRT_SelectProps = SelectProps & HTMLPropsRef; -type MRT_MultiSelectProps = MultiSelectProps & HTMLPropsRef; +type MRT_TextInputProps = HTMLPropsRef & TextInputProps; +type MRT_SelectProps = HTMLPropsRef & SelectProps; +type MRT_MultiSelectProps = HTMLPropsRef & MultiSelectProps; export const MRT_EditCellTextInput = ({ cell, table, ...rest -}: PropsTextInput | PropsSelect | PropsMultiSelect) => { +}: PropsMultiSelect | PropsSelect | PropsTextInput) => { const { getState, options: { diff --git a/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx b/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx index 58d6768bc..ccb4f919f 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; + import classes from './MRT_FilterCheckBox.module.css'; + import { Checkbox, type CheckboxProps, Tooltip } from '@mantine/core'; + import { type MRT_CellValue, type MRT_Column, diff --git a/packages/mantine-react-table/src/components/inputs/MRT_FilterRangeFields.tsx b/packages/mantine-react-table/src/components/inputs/MRT_FilterRangeFields.tsx index c67817782..e2750a5e1 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_FilterRangeFields.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_FilterRangeFields.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_FilterRangeFields.module.css'; + import { Box, type BoxProps } from '@mantine/core'; + import { MRT_FilterTextInput } from './MRT_FilterTextInput'; + import { type MRT_Header, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/inputs/MRT_FilterRangeSlider.tsx b/packages/mantine-react-table/src/components/inputs/MRT_FilterRangeSlider.tsx index 7fd6c835b..63f7b16d3 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_FilterRangeSlider.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_FilterRangeSlider.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_FilterRangeSlider.module.css'; + import { useEffect, useRef, useState } from 'react'; + import { RangeSlider, type RangeSliderProps } from '@mantine/core'; + import { type MRT_Header, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx index b2dffcf02..7c5d6eac6 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; + import classes from './MRT_FilterTextInput.module.css'; + import { type MouseEvent, useEffect, useMemo, useRef, useState } from 'react'; + import { ActionIcon, Autocomplete, @@ -13,6 +16,7 @@ import { } from '@mantine/core'; import { DateInput } from '@mantine/dates'; import { useDebouncedValue } from '@mantine/hooks'; + import { localizedFilterOption } from '../../fns/filterFns'; import { type MRT_Header, @@ -199,6 +203,11 @@ export const MRT_FilterTextInput = ({ newFilterValues[rangeFilterIndex as number] = undefined; return newFilterValues; }); + // This is from Mantine v6 but it also applies for v7 + // https://github.com/mantinedev/mantine/issues/4716#issuecomment-1702699688 + } else if (isSelectFilter) { + setFilterValue(null); + column.setFilterValue(null); } else { setFilterValue(''); column.setFilterValue(undefined); diff --git a/packages/mantine-react-table/src/components/inputs/MRT_GlobalFilterTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_GlobalFilterTextInput.tsx index 4cc89b67b..76fc9326b 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_GlobalFilterTextInput.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_GlobalFilterTextInput.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; + import classes from './MRT_GlobalFilterTextInput.module.css'; + import { useEffect, useRef, useState } from 'react'; + import { ActionIcon, Collapse, @@ -10,6 +13,7 @@ import { Tooltip, } from '@mantine/core'; import { useDebouncedValue } from '@mantine/hooks'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu'; diff --git a/packages/mantine-react-table/src/components/inputs/MRT_SelectCheckbox.tsx b/packages/mantine-react-table/src/components/inputs/MRT_SelectCheckbox.tsx index aff57aa45..50e5c3020 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_SelectCheckbox.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_SelectCheckbox.tsx @@ -1,4 +1,5 @@ import { type MouseEvent } from 'react'; + import { Checkbox, type CheckboxProps, @@ -8,6 +9,7 @@ import { type SwitchProps, Tooltip, } from '@mantine/core'; + import { type MRT_Row, type MRT_RowData, @@ -86,7 +88,11 @@ export const MRT_SelectCheckbox = ({ isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create', onChange: (event) => { event.stopPropagation(); - selectAll ? onSelectAllChange(event) : onSelectionChange!(event); + if (selectAll) { + onSelectAllChange(event); + } else { + onSelectionChange!(event); + } }, size: density === 'xs' ? 'sm' : 'md', ...checkboxProps, diff --git a/packages/mantine-react-table/src/components/menus/MRT_ColumnActionMenu.tsx b/packages/mantine-react-table/src/components/menus/MRT_ColumnActionMenu.tsx index 7625c5b4d..797780fe9 100644 --- a/packages/mantine-react-table/src/components/menus/MRT_ColumnActionMenu.tsx +++ b/packages/mantine-react-table/src/components/menus/MRT_ColumnActionMenu.tsx @@ -1,5 +1,7 @@ import classes from './MRT_ColumnActionMenu.module.css'; + import { ActionIcon, Menu, type MenuProps, Tooltip } from '@mantine/core'; + import { type MRT_Header, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/menus/MRT_FilterOptionMenu.tsx b/packages/mantine-react-table/src/components/menus/MRT_FilterOptionMenu.tsx index 41ba49ae2..18ee49ce3 100644 --- a/packages/mantine-react-table/src/components/menus/MRT_FilterOptionMenu.tsx +++ b/packages/mantine-react-table/src/components/menus/MRT_FilterOptionMenu.tsx @@ -1,6 +1,9 @@ import classes from './MRT_FilterOptionMenu.module.css'; + import { Fragment, useMemo } from 'react'; + import { Menu } from '@mantine/core'; + import { type MRT_FilterOption, type MRT_Header, diff --git a/packages/mantine-react-table/src/components/menus/MRT_RowActionMenu.tsx b/packages/mantine-react-table/src/components/menus/MRT_RowActionMenu.tsx index 5d1051b7d..097fbe810 100644 --- a/packages/mantine-react-table/src/components/menus/MRT_RowActionMenu.tsx +++ b/packages/mantine-react-table/src/components/menus/MRT_RowActionMenu.tsx @@ -1,5 +1,7 @@ import { type MouseEvent } from 'react'; + import { ActionIcon, type ActionIconProps, Menu, Tooltip } from '@mantine/core'; + import { type MRT_Row, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx b/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx index f7177cad7..16c5adf19 100644 --- a/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx +++ b/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx @@ -1,8 +1,13 @@ import clsx from 'clsx'; + import classes from './MRT_ShowHideColumnsMenu.module.css'; + import { useMemo, useState } from 'react'; + import { Button, Flex, Menu } from '@mantine/core'; + import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems'; + import { type MRT_Column, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx b/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx index 0ee3411ee..719ca4039 100644 --- a/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +++ b/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx @@ -1,4 +1,5 @@ import classes from './MRT_ShowHideColumnsMenuItems.module.css'; + import { type Dispatch, type DragEvent, @@ -6,6 +7,7 @@ import { useRef, useState, } from 'react'; + import { Box, Menu, @@ -14,6 +16,7 @@ import { Tooltip, useMantineTheme, } from '@mantine/core'; + import { type MRT_CellValue, type MRT_Column, diff --git a/packages/mantine-react-table/src/components/modals/MRT_EditRowModal.tsx b/packages/mantine-react-table/src/components/modals/MRT_EditRowModal.tsx index 0c35909ec..6e27a9f48 100644 --- a/packages/mantine-react-table/src/components/modals/MRT_EditRowModal.tsx +++ b/packages/mantine-react-table/src/components/modals/MRT_EditRowModal.tsx @@ -1,4 +1,5 @@ import { Flex, Modal, type ModalProps, Stack } from '@mantine/core'; + import { type MRT_Row, type MRT_RowData, diff --git a/packages/mantine-react-table/src/components/table/MRT_Table.tsx b/packages/mantine-react-table/src/components/table/MRT_Table.tsx index ebeb0ba58..bed3f9032 100644 --- a/packages/mantine-react-table/src/components/table/MRT_Table.tsx +++ b/packages/mantine-react-table/src/components/table/MRT_Table.tsx @@ -1,18 +1,22 @@ import clsx from 'clsx'; + import classes from './MRT_Table.module.css'; + import { useMemo } from 'react'; + import { - Table, - type TableProps, darken, lighten, + Table, + type TableProps, useMantineColorScheme, } from '@mantine/core'; + import { useMRT_ColumnVirtualizer } from '../../hooks/useMRT_ColumnVirtualizer'; import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseCSSVarId } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; -import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody'; +import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody'; import { MRT_TableFooter } from '../footer/MRT_TableFooter'; import { MRT_TableHead } from '../head/MRT_TableHead'; diff --git a/packages/mantine-react-table/src/components/table/MRT_TableContainer.tsx b/packages/mantine-react-table/src/components/table/MRT_TableContainer.tsx index 5159284eb..f6284036a 100644 --- a/packages/mantine-react-table/src/components/table/MRT_TableContainer.tsx +++ b/packages/mantine-react-table/src/components/table/MRT_TableContainer.tsx @@ -1,8 +1,13 @@ import clsx from 'clsx'; + import classes from './MRT_TableContainer.module.css'; + import { useEffect, useLayoutEffect, useState } from 'react'; + import { Box, type BoxProps, LoadingOverlay } from '@mantine/core'; + import { MRT_Table } from './MRT_Table'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; import { MRT_EditRowModal } from '../modals/MRT_EditRowModal'; diff --git a/packages/mantine-react-table/src/components/table/MRT_TablePaper.tsx b/packages/mantine-react-table/src/components/table/MRT_TablePaper.tsx index c434d3187..279c09ed4 100644 --- a/packages/mantine-react-table/src/components/table/MRT_TablePaper.tsx +++ b/packages/mantine-react-table/src/components/table/MRT_TablePaper.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_TablePaper.module.css'; + import { Paper, type PaperProps } from '@mantine/core'; + import { MRT_TableContainer } from './MRT_TableContainer'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar'; diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_BottomToolbar.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_BottomToolbar.tsx index 09fc7b070..1e6bb3ef4 100644 --- a/packages/mantine-react-table/src/components/toolbar/MRT_BottomToolbar.tsx +++ b/packages/mantine-react-table/src/components/toolbar/MRT_BottomToolbar.tsx @@ -1,12 +1,16 @@ import clsx from 'clsx'; -import classes from './MRT_BottomToolbar.module.css'; + import commonClasses from './common.styles.module.css'; +import classes from './MRT_BottomToolbar.module.css'; + import { Box, type BoxProps } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; + import { MRT_ProgressBar } from './MRT_ProgressBar'; import { MRT_TablePagination } from './MRT_TablePagination'; import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner'; import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_ProgressBar.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_ProgressBar.tsx index d8d40a4e2..aeeaab074 100644 --- a/packages/mantine-react-table/src/components/toolbar/MRT_ProgressBar.tsx +++ b/packages/mantine-react-table/src/components/toolbar/MRT_ProgressBar.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; + import classes from './MRT_ProgressBar.module.css'; + import { Collapse, Progress, type ProgressProps } from '@mantine/core'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_TablePagination.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_TablePagination.tsx index 38d596e5a..d7fbea3ae 100644 --- a/packages/mantine-react-table/src/components/toolbar/MRT_TablePagination.tsx +++ b/packages/mantine-react-table/src/components/toolbar/MRT_TablePagination.tsx @@ -1,5 +1,7 @@ import clsx from 'clsx'; + import classes from './MRT_TablePagination.module.css'; + import { ActionIcon, Box, @@ -9,6 +11,7 @@ import { Select, Text, } from '@mantine/core'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx index 10bccbd72..93904ab12 100644 --- a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +++ b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; + import classes from './MRT_ToolbarAlertBanner.module.css'; + import { Fragment, useMemo } from 'react'; + import { ActionIcon, Alert, @@ -11,6 +14,7 @@ import { Flex, Stack, } from '@mantine/core'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { getMRT_SelectAllHandler } from '../../utils/row.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarDropZone.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarDropZone.tsx index 85c3acd96..08deaa979 100644 --- a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarDropZone.tsx +++ b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarDropZone.tsx @@ -1,7 +1,11 @@ import clsx from 'clsx'; + import classes from './MRT_ToolbarDropZone.module.css'; + import { type DragEvent, useEffect } from 'react'; + import { Flex, type FlexProps, Text, Transition } from '@mantine/core'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; interface Props extends FlexProps { diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarInternalButtons.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarInternalButtons.tsx index 66ff95a78..9e2f9696c 100644 --- a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarInternalButtons.tsx +++ b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarInternalButtons.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; + import classes from './MRT_ToolbarInternalButtons.module.css'; + import { Flex, type FlexProps } from '@mantine/core'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton'; import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton'; diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_TopToolbar.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_TopToolbar.tsx index 5a9ef89e5..d32c2a1ee 100644 --- a/packages/mantine-react-table/src/components/toolbar/MRT_TopToolbar.tsx +++ b/packages/mantine-react-table/src/components/toolbar/MRT_TopToolbar.tsx @@ -1,13 +1,17 @@ import clsx from 'clsx'; -import classes from './MRT_TopToolbar.module.css'; + import commonClasses from './common.styles.module.css'; +import classes from './MRT_TopToolbar.module.css'; + import { Box, type BoxProps, Flex } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; + import { MRT_ProgressBar } from './MRT_ProgressBar'; import { MRT_TablePagination } from './MRT_TablePagination'; import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner'; import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone'; import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons'; + import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; import { MRT_GlobalFilterTextInput } from '../inputs/MRT_GlobalFilterTextInput'; diff --git a/packages/mantine-react-table/src/fns/filterFns.ts b/packages/mantine-react-table/src/fns/filterFns.ts index a23e5da70..398a7b257 100644 --- a/packages/mantine-react-table/src/fns/filterFns.ts +++ b/packages/mantine-react-table/src/fns/filterFns.ts @@ -1,9 +1,10 @@ import { type RankingInfo, - rankItem, rankings, + rankItem, } from '@tanstack/match-sorter-utils'; -import { type Row, filterFns } from '@tanstack/react-table'; +import { filterFns, type Row } from '@tanstack/react-table'; + import { type MRT_FilterOption, type MRT_Localization, diff --git a/packages/mantine-react-table/src/fns/sortingFns.ts b/packages/mantine-react-table/src/fns/sortingFns.ts index a86bbea70..79d52984a 100644 --- a/packages/mantine-react-table/src/fns/sortingFns.ts +++ b/packages/mantine-react-table/src/fns/sortingFns.ts @@ -1,5 +1,6 @@ -import { type RankingInfo, compareItems } from '@tanstack/match-sorter-utils'; +import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils'; import { type Row, sortingFns } from '@tanstack/react-table'; + import { type MRT_Row, type MRT_RowData } from '../types'; const fuzzy = ( diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx index 94d3ab514..1b4258837 100644 --- a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +++ b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx @@ -1,4 +1,5 @@ import { type RefObject } from 'react'; + import { MRT_TableBodyRowGrabHandle } from '../../components/body/MRT_TableBodyRowGrabHandle'; import { type MRT_ColumnDef, diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx index df1ff9304..c45297b33 100644 --- a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +++ b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx @@ -1,5 +1,7 @@ import { type ReactNode } from 'react'; + import { Flex, Tooltip } from '@mantine/core'; + import { MRT_ExpandAllButton } from '../../components/buttons/MRT_ExpandAllButton'; import { MRT_ExpandButton } from '../../components/buttons/MRT_ExpandButton'; import { diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx index 96c27bccd..0b2a44559 100644 --- a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +++ b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx @@ -18,8 +18,8 @@ export const getMRT_RowNumbersColumnDef = ( ((rowNumberDisplayMode === 'static' ? renderedRowIndex + pageSize * pageIndex : row.index) ?? 0) + 1, - Header: () => localization.rowNumber, grow: false, + Header: () => localization.rowNumber, ...defaultDisplayColumnProps({ header: 'rowNumbers', id: 'mrt-row-numbers', diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx index 13bf4bb3f..381daeb0f 100644 --- a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +++ b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx @@ -19,11 +19,11 @@ export const getMRT_RowSelectColumnDef = ( table={table} /> ), + grow: false, Header: enableSelectAll && enableMultiRowSelection ? ({ table }) => : undefined, - grow: false, ...defaultDisplayColumnProps({ header: 'select', id: 'mrt-row-select', diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx index e849da176..460bea97d 100644 --- a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx +++ b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx @@ -1,4 +1,5 @@ import { MRT_DefaultDisplayColumn } from '../useMRT_TableOptions'; + import { type MRT_ColumnDef, type MRT_RowData, diff --git a/packages/mantine-react-table/src/hooks/useMRT_ColumnVirtualizer.ts b/packages/mantine-react-table/src/hooks/useMRT_ColumnVirtualizer.ts index 0aa268812..757ad7d95 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_ColumnVirtualizer.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_ColumnVirtualizer.ts @@ -1,5 +1,7 @@ import { useCallback, useMemo } from 'react'; + import { type Range, useVirtualizer } from '@tanstack/react-virtual'; + import { type MRT_ColumnVirtualizer, type MRT_RowData, diff --git a/packages/mantine-react-table/src/hooks/useMRT_Effects.ts b/packages/mantine-react-table/src/hooks/useMRT_Effects.ts index 450f528c7..96bff5328 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_Effects.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_Effects.ts @@ -1,4 +1,5 @@ import { useEffect, useReducer, useRef } from 'react'; + import { type MRT_RowData, type MRT_SortingState, diff --git a/packages/mantine-react-table/src/hooks/useMRT_RowVirtualizer.ts b/packages/mantine-react-table/src/hooks/useMRT_RowVirtualizer.ts index 8c0952a29..410c41d0a 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_RowVirtualizer.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_RowVirtualizer.ts @@ -1,5 +1,7 @@ import { useCallback } from 'react'; + import { type Range, useVirtualizer } from '@tanstack/react-virtual'; + import { type MRT_Row, type MRT_RowData, diff --git a/packages/mantine-react-table/src/hooks/useMRT_Rows.ts b/packages/mantine-react-table/src/hooks/useMRT_Rows.ts index ee3edb6cf..ad7b8fe28 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_Rows.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_Rows.ts @@ -1,4 +1,5 @@ import { useMemo } from 'react'; + import { type MRT_Row, type MRT_RowData, diff --git a/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts b/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts index f8a694e4a..bec28e0dd 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts @@ -1,5 +1,7 @@ import { useMemo, useRef, useState } from 'react'; + import { useReactTable } from '@tanstack/react-table'; + import { type MRT_Cell, type MRT_Column, @@ -129,10 +131,10 @@ export const useMRT_TableInstance = ( const [grouping, onGroupingChange] = useState( initialState.grouping ?? [], ); - const [hoveredColumn, setHoveredColumn] = useState - > | null>(initialState.hoveredColumn ?? null); - const [hoveredRow, setHoveredRow] = useState> | null>( + >>(initialState.hoveredColumn ?? null); + const [hoveredRow, setHoveredRow] = useState>>( initialState.hoveredRow ?? null, ); const [isFullScreen, setIsFullScreen] = useState( @@ -271,9 +273,11 @@ export const useMRT_TableInstance = ( if (row === true) { _row = createRow(table); } - statefulTableOptions?.onCreatingRowChange?.( - _row as MRT_Row | null, - ) ?? _setCreatingRow(_row as MRT_Row | null); + if (statefulTableOptions?.onCreatingRowChange) { + statefulTableOptions.onCreatingRowChange(_row as MRT_Row | null); + } else { + _setCreatingRow(_row as MRT_Row | null); + } }; table.setColumnFilterFns = statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns; diff --git a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts index 79cf2443c..f1253c249 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts @@ -1,4 +1,5 @@ import { useMemo } from 'react'; + import { getCoreRowModel, getExpandedRowModel, @@ -10,7 +11,9 @@ import { getPaginationRowModel, getSortedRowModel, } from '@tanstack/react-table'; + import { useDirection } from '@mantine/core'; + import { MRT_AggregationFns } from '../fns/aggregationFns'; import { MRT_FilterFns } from '../fns/filterFns'; import { MRT_SortingFns } from '../fns/sortingFns'; diff --git a/packages/mantine-react-table/src/index.ts b/packages/mantine-react-table/src/index.ts index 93561251f..1034d905c 100644 --- a/packages/mantine-react-table/src/index.ts +++ b/packages/mantine-react-table/src/index.ts @@ -1,39 +1,17 @@ -export * from './types'; - -//helpers -export * from './utils/tanstack.helpers'; -export * from './utils/column.utils'; -export * from './utils/displayColumn.utils'; -export * from './utils/row.utils'; -export * from './utils/style.utils'; - -//fns -export * from './fns/aggregationFns'; -export * from './fns/filterFns'; -export * from './fns/sortingFns'; - -//hooks -export * from './hooks/useMantineReactTable'; -export * from './hooks/useMRT_ColumnVirtualizer'; -export * from './hooks/useMRT_Effects'; -export * from './hooks/useMRT_RowVirtualizer'; -export * from './hooks/useMRT_Rows'; -export * from './hooks/useMRT_TableInstance'; -export * from './hooks/useMRT_TableOptions'; - -//components -export * from './components/MantineReactTable'; //body components export * from './components/body/MRT_TableBody'; + export * from './components/body/MRT_TableBodyCell'; export * from './components/body/MRT_TableBodyCellValue'; export * from './components/body/MRT_TableBodyEmptyRow'; export * from './components/body/MRT_TableBodyRow'; export * from './components/body/MRT_TableBodyRowGrabHandle'; + export * from './components/body/MRT_TableBodyRowPinButton'; export * from './components/body/MRT_TableDetailPanel'; //button components export * from './components/buttons/MRT_ColumnPinningButtons'; + export * from './components/buttons/MRT_CopyButton'; export * from './components/buttons/MRT_EditActionButtons'; export * from './components/buttons/MRT_ExpandAllButton'; @@ -41,6 +19,7 @@ export * from './components/buttons/MRT_ExpandButton'; export * from './components/buttons/MRT_GrabHandleButton'; export * from './components/buttons/MRT_RowPinButton'; export * from './components/buttons/MRT_ShowHideColumnsButton'; + export * from './components/buttons/MRT_ToggleDensePaddingButton'; export * from './components/buttons/MRT_ToggleFiltersButton'; export * from './components/buttons/MRT_ToggleFullScreenButton'; @@ -67,6 +46,8 @@ export * from './components/inputs/MRT_FilterRangeSlider'; export * from './components/inputs/MRT_FilterTextInput'; export * from './components/inputs/MRT_GlobalFilterTextInput'; export * from './components/inputs/MRT_SelectCheckbox'; +//components +export * from './components/MantineReactTable'; //menu components export * from './components/menus/MRT_ColumnActionMenu'; export * from './components/menus/MRT_FilterOptionMenu'; @@ -87,3 +68,22 @@ export * from './components/toolbar/MRT_ToolbarAlertBanner'; export * from './components/toolbar/MRT_ToolbarDropZone'; export * from './components/toolbar/MRT_ToolbarInternalButtons'; export * from './components/toolbar/MRT_TopToolbar'; +//fns +export * from './fns/aggregationFns'; +export * from './fns/filterFns'; +export * from './fns/sortingFns'; +//hooks +export * from './hooks/useMantineReactTable'; +export * from './hooks/useMRT_ColumnVirtualizer'; +export * from './hooks/useMRT_Effects'; +export * from './hooks/useMRT_Rows'; +export * from './hooks/useMRT_RowVirtualizer'; +export * from './hooks/useMRT_TableInstance'; +export * from './hooks/useMRT_TableOptions'; +export * from './types'; +export * from './utils/column.utils'; +export * from './utils/displayColumn.utils'; +export * from './utils/row.utils'; +export * from './utils/style.utils'; +//helpers +export * from './utils/tanstack.helpers'; diff --git a/packages/mantine-react-table/src/types.ts b/packages/mantine-react-table/src/types.ts index c22803815..3576ad376 100644 --- a/packages/mantine-react-table/src/types.ts +++ b/packages/mantine-react-table/src/types.ts @@ -6,6 +6,7 @@ import { type RefObject, type SetStateAction, } from 'react'; + import { type AccessorFn, type AggregationFn, @@ -41,6 +42,7 @@ import { type Virtualizer, type VirtualizerOptions, } from '@tanstack/react-virtual'; + import { type ActionIconProps, type AlertProps, @@ -64,13 +66,14 @@ import { type TableTbodyProps, type TableTdProps, type TableTfootProps, - type TableThProps, type TableTheadProps, + type TableThProps, type TableTrProps, type TextInputProps, type UnstyledButtonProps, } from '@mantine/core'; import { type DateInputProps } from '@mantine/dates'; + import { type MRT_AggregationFns } from './fns/aggregationFns'; import { type MRT_FilterFns } from './fns/filterFns'; import { type MRT_SortingFns } from './fns/sortingFns'; @@ -79,28 +82,28 @@ import { type MRT_Icons } from './icons'; export type { MRT_Icons }; export type LiteralUnion = - | T - | (U & Record); + | (Record & U) + | T; export type Prettify = { [K in keyof T]: T[K] } & unknown; export type Xor = - | Prettify - | Prettify; + | Prettify<{ [k in keyof A]?: never } & B> + | Prettify<{ [k in keyof B]?: never } & A>; -export type HTMLPropsRef = Omit< +export type HTMLPropsRef = { + ref?: MutableRefObject | null; +} & Omit< HTMLProps, 'color' | 'data' | 'label' | 'ref' | 'size' | 'style' | 'type' -> & { - ref?: MutableRefObject | null; -}; +>; export type MantineShade = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; -export type MRT_PaginationProps = Partial & { +export type MRT_PaginationProps = { rowsPerPageOptions?: string[]; showRowsPerPage?: boolean; -}; +} & Partial; export type MRT_DensityState = 'md' | 'xl' | 'xs'; @@ -132,18 +135,18 @@ export type MRT_VirtualizerOptions< export type MRT_ColumnVirtualizer< TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableCellElement, -> = Virtualizer & { +> = { virtualColumns: MRT_VirtualItem[]; virtualPaddingLeft?: number; virtualPaddingRight?: number; -}; +} & Virtualizer; export type MRT_RowVirtualizer< TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableRowElement, -> = Virtualizer & { +> = { virtualRows: MRT_VirtualItem[]; -}; +} & Virtualizer; export type MRT_ColumnHelper = { accessor: < @@ -195,9 +198,10 @@ export interface MRT_Localization { filterFuzzy: string; filterGreaterThan: string; filterGreaterThanOrEqualTo: string; - filterInNumberRange: string; filterIncludesString: string; filterIncludesStringSensitive: string; + filteringByColumn: string; + filterInNumberRange: string; filterLessThan: string; filterLessThanOrEqualTo: string; filterMode: string; @@ -205,7 +209,6 @@ export interface MRT_Localization { filterNotEquals: string; filterStartsWith: string; filterWeakEquals: string; - filteringByColumn: string; goToFirstPage: string; goToLastPage: string; goToNextPage: string; @@ -261,29 +264,7 @@ export interface MRT_RowModel { rowsById: { [key: string]: MRT_Row }; } -export type MRT_TableInstance = Omit< - Table, - | 'getAllColumns' - | 'getAllFlatColumns' - | 'getAllLeafColumns' - | 'getBottomRows' - | 'getCenterLeafColumns' - | 'getCenterRows' - | 'getColumn' - | 'getExpandedRowModel' - | 'getFlatHeaders' - | 'getHeaderGroups' - | 'getLeftLeafColumns' - | 'getPaginationRowModel' - | 'getPreFilteredRowModel' - | 'getPrePaginationRowModel' - | 'getRightLeafColumns' - | 'getRowModel' - | 'getSelectedRowModel' - | 'getState' - | 'getTopRows' - | 'options' -> & { +export type MRT_TableInstance = { getAllColumns: () => MRT_Column[]; getAllFlatColumns: () => MRT_Column[]; getAllLeafColumns: () => MRT_Column[]; @@ -326,51 +307,69 @@ export type MRT_TableInstance = Omit< setEditingCell: Dispatch | null>>; setEditingRow: Dispatch | null>>; setGlobalFilterFn: Dispatch>; - setHoveredColumn: Dispatch> | null>>; - setHoveredRow: Dispatch> | null>>; + setHoveredColumn: Dispatch>>>; + setHoveredRow: Dispatch>>>; setIsFullScreen: Dispatch>; setShowAlertBanner: Dispatch>; setShowColumnFilters: Dispatch>; setShowGlobalFilter: Dispatch>; setShowToolbarDropZone: Dispatch>; -}; +} & Omit< + Table, + | 'getAllColumns' + | 'getAllFlatColumns' + | 'getAllLeafColumns' + | 'getBottomRows' + | 'getCenterLeafColumns' + | 'getCenterRows' + | 'getColumn' + | 'getExpandedRowModel' + | 'getFlatHeaders' + | 'getHeaderGroups' + | 'getLeftLeafColumns' + | 'getPaginationRowModel' + | 'getPreFilteredRowModel' + | 'getPrePaginationRowModel' + | 'getRightLeafColumns' + | 'getRowModel' + | 'getSelectedRowModel' + | 'getState' + | 'getTopRows' + | 'options' +>; -export type MRT_DefinedTableOptions = Omit< - MRT_TableOptions, - 'icons' | 'localization' -> & { +export type MRT_DefinedTableOptions = { icons: MRT_Icons; localization: MRT_Localization; -}; +} & Omit, 'icons' | 'localization'>; -export type MRT_StatefulTableOptions = - MRT_DefinedTableOptions & { - state: Pick< - MRT_TableState, - | 'columnFilterFns' - | 'columnOrder' - | 'columnSizingInfo' - | 'creatingRow' - | 'density' - | 'draggingColumn' - | 'draggingRow' - | 'editingCell' - | 'editingRow' - | 'globalFilterFn' - | 'grouping' - | 'hoveredColumn' - | 'hoveredRow' - | 'isFullScreen' - | 'pagination' - | 'showAlertBanner' - | 'showColumnFilters' - | 'showGlobalFilter' - | 'showToolbarDropZone' - >; - }; +export type MRT_StatefulTableOptions = { + state: Pick< + MRT_TableState, + | 'columnFilterFns' + | 'columnOrder' + | 'columnSizingInfo' + | 'creatingRow' + | 'density' + | 'draggingColumn' + | 'draggingRow' + | 'editingCell' + | 'editingRow' + | 'globalFilterFn' + | 'grouping' + | 'hoveredColumn' + | 'hoveredRow' + | 'isFullScreen' + | 'pagination' + | 'showAlertBanner' + | 'showColumnFilters' + | 'showGlobalFilter' + | 'showToolbarDropZone' + >; +} & MRT_DefinedTableOptions; export type MRT_TableState = Prettify< - TableState & { + { columnFilterFns: MRT_ColumnFilterFnsState; creatingRow: MRT_Row | null; density: MRT_DensityState; @@ -379,8 +378,8 @@ export type MRT_TableState = Prettify< editingCell: MRT_Cell | null; editingRow: MRT_Row | null; globalFilterFn: MRT_FilterOption; - hoveredColumn: Partial> | null; - hoveredRow: Partial> | null; + hoveredColumn: null | Partial>; + hoveredRow: null | Partial>; isFullScreen: boolean; isLoading: boolean; isSaving: boolean; @@ -391,76 +390,10 @@ export type MRT_TableState = Prettify< showProgressBars: boolean; showSkeletons: boolean; showToolbarDropZone: boolean; - } + } & TableState >; -export type MRT_ColumnDef = Omit< - ColumnDef, - | 'accessorKey' - | 'aggregatedCell' - | 'aggregationFn' - | 'cell' - | 'columns' - | 'filterFn' - | 'footer' - | 'header' - | 'id' - | 'sortingFn' -> & { - AggregatedCell?: (props: { - cell: MRT_Cell; - column: MRT_Column; - row: MRT_Row; - table: MRT_TableInstance; - }) => ReactNode; - Cell?: (props: { - cell: MRT_Cell; - column: MRT_Column; - renderedCellValue: ReactNode | number | string; - renderedColumnIndex?: number; - renderedRowIndex?: number; - row: MRT_Row; - rowRef?: RefObject; - table: MRT_TableInstance; - }) => ReactNode; - Edit?: (props: { - cell: MRT_Cell; - column: MRT_Column; - row: MRT_Row; - table: MRT_TableInstance; - }) => ReactNode; - Filter?: (props: { - column: MRT_Column; - header: MRT_Header; - rangeFilterIndex?: number; - table: MRT_TableInstance; - }) => ReactNode; - Footer?: - | ((props: { - column: MRT_Column; - footer: MRT_Header; - table: MRT_TableInstance; - }) => ReactNode) - | ReactNode; - GroupedCell?: (props: { - cell: MRT_Cell; - column: MRT_Column; - row: MRT_Row; - table: MRT_TableInstance; - }) => ReactNode; - Header?: - | ((props: { - column: MRT_Column; - header: MRT_Header; - table: MRT_TableInstance; - }) => ReactNode) - | ReactNode; - PlaceholderCell?: (props: { - cell: MRT_Cell; - column: MRT_Column; - row: MRT_Row; - table: MRT_TableInstance; - }) => ReactNode; +export type MRT_ColumnDef = { /** * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition. * Specify a function here to point to the correct property in the data object. @@ -476,8 +409,24 @@ export type MRT_ColumnDef = Omit< * @example accessorKey: 'username' //simple * @example accessorKey: 'name.firstName' //deep key dot notation */ - accessorKey?: DeepKeys | (string & {}); + accessorKey?: ({} & string) | DeepKeys; + AggregatedCell?: (props: { + cell: MRT_Cell; + column: MRT_Column; + row: MRT_Row; + table: MRT_TableInstance; + }) => ReactNode; aggregationFn?: Array> | MRT_AggregationFn; + Cell?: (props: { + cell: MRT_Cell; + column: MRT_Column; + renderedCellValue: number | ReactNode | string; + renderedColumnIndex?: number; + renderedRowIndex?: number; + row: MRT_Row; + rowRef?: RefObject; + table: MRT_TableInstance; + }) => ReactNode; /** * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`. * Leave this blank if you are just creating a normal data column. @@ -488,10 +437,16 @@ export type MRT_ColumnDef = Omit< */ columnDefType?: 'data' | 'display' | 'group'; columnFilterModeOptions?: Array< - LiteralUnion + LiteralUnion > | null; columns?: MRT_ColumnDef[]; - editVariant?: 'select' | 'text' | 'multi-select'; + Edit?: (props: { + cell: MRT_Cell; + column: MRT_Column; + row: MRT_Row; + table: MRT_TableInstance; + }) => ReactNode; + editVariant?: 'multi-select' | 'select' | 'text'; enableClickToCopy?: ((cell: MRT_Cell) => boolean) | boolean; enableColumnActions?: boolean; enableColumnDragging?: boolean; @@ -499,6 +454,12 @@ export type MRT_ColumnDef = Omit< enableColumnOrdering?: boolean; enableEditing?: ((row: MRT_Row) => boolean) | boolean; enableFilterMatchHighlighting?: boolean; + Filter?: (props: { + column: MRT_Column; + header: MRT_Header; + rangeFilterIndex?: number; + table: MRT_TableInstance; + }) => ReactNode; filterFn?: MRT_FilterFn; filterTooltipValueFn?: MRT_FilterTooltipValueFn; filterVariant?: @@ -511,14 +472,34 @@ export type MRT_ColumnDef = Omit< | 'range-slider' | 'select' | 'text'; + Footer?: + | ((props: { + column: MRT_Column; + footer: MRT_Header; + table: MRT_TableInstance; + }) => ReactNode) + | ReactNode; /** * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F) */ footer?: string; + GroupedCell?: (props: { + cell: MRT_Cell; + column: MRT_Column; + row: MRT_Row; + table: MRT_TableInstance; + }) => ReactNode; /** * If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow. */ grow?: boolean | number; + Header?: + | ((props: { + column: MRT_Column; + header: MRT_Header; + table: MRT_TableInstance; + }) => ReactNode) + | ReactNode; /** * header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H) */ @@ -532,7 +513,7 @@ export type MRT_ColumnDef = Omit< * * @default gets set to the same value as `accessorKey` by default */ - id?: LiteralUnion; + id?: LiteralUnion; mantineColumnActionsButtonProps?: | ((props: { column: MRT_Column; @@ -638,6 +619,12 @@ export type MRT_ColumnDef = Omit< table: MRT_TableInstance; }) => HTMLPropsRef & TableThProps) | (HTMLPropsRef & TableThProps); + PlaceholderCell?: (props: { + cell: MRT_Cell; + column: MRT_Column; + row: MRT_Row; + table: MRT_TableInstance; + }) => ReactNode; renderColumnActionsMenuItems?: (props: { column: MRT_Column; internalColumnMenuItems: ReactNode; @@ -651,78 +638,80 @@ export type MRT_ColumnDef = Omit< }) => ReactNode; sortingFn?: MRT_SortingFn; visibleInShowHideMenu?: boolean; -}; +} & Omit< + ColumnDef, + | 'accessorKey' + | 'aggregatedCell' + | 'aggregationFn' + | 'cell' + | 'columns' + | 'filterFn' + | 'footer' + | 'header' + | 'id' + | 'sortingFn' +>; export type MRT_DisplayColumnDef< TData extends MRT_RowData, TValue = unknown, > = Omit, 'accessorFn' | 'accessorKey'>; -export type MRT_GroupColumnDef = - MRT_DisplayColumnDef & { - columns: MRT_ColumnDef[]; - }; +export type MRT_GroupColumnDef = { + columns: MRT_ColumnDef[]; +} & MRT_DisplayColumnDef; export type MRT_DefinedColumnDef< TData extends MRT_RowData, TValue = unknown, -> = Omit, 'defaultDisplayColumn' | 'id'> & { +> = { _filterFn: MRT_FilterOption; defaultDisplayColumn: Partial>; id: string; -}; +} & Omit, 'defaultDisplayColumn' | 'id'>; -export type MRT_Column = Omit< - Column, - 'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header' -> & { +export type MRT_Column = { columnDef: MRT_DefinedColumnDef; columns?: MRT_Column[]; filterFn?: MRT_FilterFn; footer: string; header: string; -}; +} & Omit< + Column, + 'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header' +>; -export type MRT_Header = Omit< - Header, - 'column' -> & { +export type MRT_Header = { column: MRT_Column; -}; +} & Omit, 'column'>; -export type MRT_HeaderGroup = Omit< - HeaderGroup, - 'headers' -> & { +export type MRT_HeaderGroup = { headers: MRT_Header[]; -}; +} & Omit, 'headers'>; -export type MRT_Row = Omit< - Row, - '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows' -> & { - _valuesCache: Record>, any>; +export type MRT_Row = { + _valuesCache: Record & string>, any>; getAllCells: () => MRT_Cell[]; getVisibleCells: () => MRT_Cell[]; subRows?: MRT_Row[]; -}; +} & Omit< + Row, + '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows' +>; -export type MRT_Cell = Omit< - Cell, - 'column' | 'row' -> & { +export type MRT_Cell = { column: MRT_Column; row: MRT_Row; -}; +} & Omit, 'column' | 'row'>; -export type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns; +export type MRT_AggregationOption = keyof typeof MRT_AggregationFns & string; export type MRT_AggregationFn = | AggregationFn | MRT_AggregationOption; export type MRT_SortingOption = LiteralUnion< - string & keyof typeof MRT_SortingFns + keyof typeof MRT_SortingFns & string >; export type MRT_SortingFn = @@ -730,7 +719,7 @@ export type MRT_SortingFn = | SortingFn; export type MRT_FilterOption = LiteralUnion< - string & keyof typeof MRT_FilterFns + keyof typeof MRT_FilterFns & string >; export type MRT_FilterFn = @@ -769,32 +758,11 @@ export type MRT_CreateTableFeature< * See the full props list on the official docs site: * @link https://www.mantine-react-table.com/docs/api/table-options */ -export type MRT_TableOptions = Omit< - Partial>, - | 'columns' - | 'data' - | 'defaultColumn' - | 'enableRowSelection' - | 'expandRowsFn' - | 'getRowId' - | 'globalFilterFn' - | 'initialState' - | 'onStateChange' - | 'state' -> & { +export type MRT_TableOptions = { columnFilterDisplayMode?: 'custom' | 'popover' | 'subheader'; columnFilterModeOptions?: Array< - LiteralUnion + LiteralUnion > | null; - columnVirtualizerInstanceRef?: MutableRefObject | null>; - columnVirtualizerOptions?: - | ((props: { - table: MRT_TableInstance; - }) => Partial>) - | Partial>; /** * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop. * @@ -806,6 +774,15 @@ export type MRT_TableOptions = Omit< * @link https://www.mantine-react-table.com/docs/api/column-options */ columns: MRT_ColumnDef[]; + columnVirtualizerInstanceRef?: MutableRefObject>; + columnVirtualizerOptions?: + | ((props: { + table: MRT_TableInstance; + }) => Partial>) + | Partial>; createDisplayMode?: 'custom' | 'modal' | 'row'; /** * Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent. @@ -881,8 +858,8 @@ export type MRT_TableOptions = Omit< mantineBottomToolbarProps?: | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & BoxProps) - | (HTMLPropsRef & BoxProps); + }) => BoxProps & HTMLPropsRef) + | (BoxProps & HTMLPropsRef); mantineColumnActionsButtonProps?: | ((props: { column: MRT_Column; @@ -913,8 +890,8 @@ export type MRT_TableOptions = Omit< | ((props: { row: MRT_Row; table: MRT_TableInstance; - }) => HTMLPropsRef & BoxProps) - | (HTMLPropsRef & BoxProps); + }) => BoxProps & HTMLPropsRef) + | (BoxProps & HTMLPropsRef); mantineEditRowModalProps?: | ((props: { row: MRT_Row; @@ -1038,21 +1015,21 @@ export type MRT_TableOptions = Omit< }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantineSelectAllCheckboxProps?: + | ((CheckboxProps | RadioProps | SwitchProps) & + HTMLPropsRef) | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & - (CheckboxProps | RadioProps | SwitchProps)) - | (HTMLPropsRef & - (CheckboxProps | RadioProps | SwitchProps)); + }) => (CheckboxProps | RadioProps | SwitchProps) & + HTMLPropsRef); mantineSelectCheckboxProps?: + | ((CheckboxProps | RadioProps | SwitchProps) & + HTMLPropsRef) | ((props: { renderedRowIndex?: number; row: MRT_Row; table: MRT_TableInstance; - }) => HTMLPropsRef & - (CheckboxProps | RadioProps | SwitchProps)) - | (HTMLPropsRef & - (CheckboxProps | RadioProps | SwitchProps)); + }) => (CheckboxProps | RadioProps | SwitchProps) & + HTMLPropsRef); mantineSkeletonProps?: | ((props: { cell: MRT_Cell; @@ -1087,8 +1064,8 @@ export type MRT_TableOptions = Omit< mantineTableContainerProps?: | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & BoxProps) - | (HTMLPropsRef & BoxProps); + }) => BoxProps & HTMLPropsRef) + | (BoxProps & HTMLPropsRef); mantineTableFooterCellProps?: | ((props: { column: MRT_Column; @@ -1141,8 +1118,8 @@ export type MRT_TableOptions = Omit< mantineTopToolbarProps?: | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & BoxProps) - | (HTMLPropsRef & BoxProps); + }) => BoxProps & HTMLPropsRef) + | (BoxProps & HTMLPropsRef); /** * Memoize cells, rows, or the entire table body to potentially improve render performance. * @@ -1160,7 +1137,7 @@ export type MRT_TableOptions = Omit< exitCreatingMode: () => void; row: MRT_Row; table: MRT_TableInstance; - values: Record>, any>; + values: Record & string>, any>; }) => void; onDensityChange?: OnChangeFn; onDraggingColumnChange?: OnChangeFn | null>; @@ -1175,11 +1152,11 @@ export type MRT_TableOptions = Omit< exitEditingMode: () => void; row: MRT_Row; table: MRT_TableInstance; - values: Record>, any>; + values: Record & string>, any>; }) => Promise | void; onGlobalFilterFnChange?: OnChangeFn; - onHoveredColumnChange?: OnChangeFn> | null>; - onHoveredRowChange?: OnChangeFn> | null>; + onHoveredColumnChange?: OnChangeFn>>; + onHoveredRowChange?: OnChangeFn>>; onIsFullScreenChange?: OnChangeFn; onShowAlertBannerChange?: OnChangeFn; onShowColumnFiltersChange?: OnChangeFn; @@ -1216,9 +1193,9 @@ export type MRT_TableOptions = Omit< table: MRT_TableInstance; }) => ReactNode; renderDetailPanel?: (props: { + internalEditComponents: ReactNode[]; row: MRT_Row; table: MRT_TableInstance; - internalEditComponents: ReactNode[]; }) => ReactNode; renderEditRowModalContent?: (props: { internalEditComponents: ReactNode[]; @@ -1245,8 +1222,8 @@ export type MRT_TableOptions = Omit< table: MRT_TableInstance; }) => ReactNode; renderToolbarAlertBannerContent?: (props: { - groupedAlert: ReactNode | null; - selectedAlert: ReactNode | null; + groupedAlert: null | ReactNode; + selectedAlert: null | ReactNode; table: MRT_TableInstance; }) => ReactNode; renderToolbarInternalActions?: (props: { @@ -1268,10 +1245,10 @@ export type MRT_TableOptions = Omit< | 'sticky' | 'top' | 'top-and-bottom'; - rowVirtualizerInstanceRef?: MutableRefObject | null>; + >>; rowVirtualizerOptions?: | ((props: { table: MRT_TableInstance; @@ -1283,4 +1260,16 @@ export type MRT_TableOptions = Omit< * Manage state externally any way you want, then pass it back into MRT. */ state?: Partial>; -}; +} & Omit< + Partial>, + | 'columns' + | 'data' + | 'defaultColumn' + | 'enableRowSelection' + | 'expandRowsFn' + | 'getRowId' + | 'globalFilterFn' + | 'initialState' + | 'onStateChange' + | 'state' +>; diff --git a/packages/mantine-react-table/src/utils/column.utils.ts b/packages/mantine-react-table/src/utils/column.utils.ts index fc451d137..c133290cb 100644 --- a/packages/mantine-react-table/src/utils/column.utils.ts +++ b/packages/mantine-react-table/src/utils/column.utils.ts @@ -1,4 +1,5 @@ import { type Row } from '@tanstack/react-table'; + import { type MRT_Column, type MRT_ColumnDef, diff --git a/packages/mantine-react-table/src/utils/row.utils.ts b/packages/mantine-react-table/src/utils/row.utils.ts index 962c238b5..00f0c56fe 100644 --- a/packages/mantine-react-table/src/utils/row.utils.ts +++ b/packages/mantine-react-table/src/utils/row.utils.ts @@ -1,4 +1,5 @@ import { type ChangeEvent, type MouseEvent } from 'react'; + import { rankGlobalFuzzy } from '../fns/sortingFns'; import { type MRT_Row, @@ -250,9 +251,11 @@ export const getMRT_SelectAllHandler = refs: { lastSelectedRowId }, } = table; - selectAllMode === 'all' || forceAll - ? table.toggleAllRowsSelected(value ?? (event as any).target.checked) - : table.toggleAllPageRowsSelected(value ?? (event as any).target.checked); + if (selectAllMode === 'all' || forceAll) { + table.toggleAllRowsSelected(value ?? (event as any).target.checked); + } else { + table.toggleAllPageRowsSelected(value ?? (event as any).target.checked); + } if (enableRowPinning && rowPinningDisplayMode?.includes('select')) { table.setRowPinning({ bottom: [], top: [] }); } diff --git a/packages/mantine-react-table/src/utils/style.utils.ts b/packages/mantine-react-table/src/utils/style.utils.ts index 90509edb7..27fae6491 100644 --- a/packages/mantine-react-table/src/utils/style.utils.ts +++ b/packages/mantine-react-table/src/utils/style.utils.ts @@ -1,4 +1,5 @@ import { type MantineTheme } from '@mantine/core'; + import { type MantineShade } from '../types'; export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_'); diff --git a/packages/mantine-react-table/src/utils/tanstack.helpers.ts b/packages/mantine-react-table/src/utils/tanstack.helpers.ts index 717c5ec14..1b4d16d68 100644 --- a/packages/mantine-react-table/src/utils/tanstack.helpers.ts +++ b/packages/mantine-react-table/src/utils/tanstack.helpers.ts @@ -1,9 +1,11 @@ import { type ReactNode } from 'react'; + import { createRow as _createRow, flexRender as _flexRender, type Renderable, } from '@tanstack/react-table'; + import { type MRT_ColumnHelper, type MRT_DisplayColumnDef, diff --git a/packages/mantine-react-table/src/utils/virtualization.utils.ts b/packages/mantine-react-table/src/utils/virtualization.utils.ts index 2b5e8a2d2..9b311397d 100644 --- a/packages/mantine-react-table/src/utils/virtualization.utils.ts +++ b/packages/mantine-react-table/src/utils/virtualization.utils.ts @@ -1,4 +1,4 @@ -import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual'; +import { defaultRangeExtractor, type Range } from '@tanstack/react-virtual'; export const extraIndexRangeExtractor = ( range: Range, diff --git a/packages/mantine-react-table/stories/features/Aggregation.stories.tsx b/packages/mantine-react-table/stories/features/Aggregation.stories.tsx index a7a33b8dd..d3c2b7536 100644 --- a/packages/mantine-react-table/stories/features/Aggregation.stories.tsx +++ b/packages/mantine-react-table/stories/features/Aggregation.stories.tsx @@ -1,9 +1,11 @@ import { Box, Stack } from '@mantine/core'; + import { + MantineReactTable, MRT_AggregationFns, type MRT_ColumnDef, - MantineReactTable, } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; @@ -39,6 +41,7 @@ const columns = [ header: 'Last Name', }, { + accessorKey: 'age', AggregatedCell: ({ cell, table }) => ( <> Max by{' '} @@ -48,21 +51,20 @@ const columns = [ ), + aggregationFn: 'max', Footer: () => ( Average Age: {Math.round(averageAge)} ), - accessorKey: 'age', - aggregationFn: 'max', header: 'Age', }, { + accessorKey: 'gender', GroupedCell: ({ cell }) => ( {cell.getValue()} ), - accessorKey: 'gender', header: 'Gender', }, { @@ -70,6 +72,7 @@ const columns = [ header: 'State', }, { + accessorKey: 'salary', AggregatedCell: ({ cell, table }) => ( <> Average by{' '} @@ -84,6 +87,7 @@ const columns = [ ), + aggregationFn: 'mean', Cell: ({ cell }) => ( <> {cell.getValue()?.toLocaleString?.('en-US', { @@ -94,6 +98,7 @@ const columns = [ })} ), + enableGrouping: false, Footer: () => ( Average Salary: @@ -107,9 +112,6 @@ const columns = [ ), - accessorKey: 'salary', - aggregationFn: 'mean', - enableGrouping: false, header: 'Salary', }, ] as MRT_ColumnDef<(typeof data)[0]>[]; @@ -155,6 +157,7 @@ export const MultiAggregationPerColumn = () => ( header: 'Last Name', }, { + accessorKey: 'age', AggregatedCell: ({ cell, table }) => ( <> Min by{' '} @@ -172,25 +175,24 @@ export const MultiAggregationPerColumn = () => ( ), + //manually set multiple aggregation functions + aggregationFn: (columnId, leafRows: any, childRows: any) => [ + MRT_AggregationFns.min(columnId, leafRows, childRows), + MRT_AggregationFns.max(columnId, leafRows, childRows), + ], Footer: () => ( Average Age: {Math.round(averageAge)} ), - accessorKey: 'age', - //manually set multiple aggregation functions - aggregationFn: (columnId, leafRows: any, childRows: any) => [ - MRT_AggregationFns.min(columnId, leafRows, childRows), - MRT_AggregationFns.max(columnId, leafRows, childRows), - ], header: 'Age', }, { + accessorKey: 'gender', GroupedCell: ({ cell }) => ( {cell.getValue()} ), - accessorKey: 'gender', header: 'Gender', }, { @@ -198,6 +200,7 @@ export const MultiAggregationPerColumn = () => ( header: 'State', }, { + accessorKey: 'salary', AggregatedCell: ({ cell, table }) => ( <> Count:{' '} @@ -221,6 +224,7 @@ export const MultiAggregationPerColumn = () => ( ), + aggregationFn: ['count', 'mean'], //multiple aggregation functions Cell: ({ cell }) => ( <> {cell.getValue()?.toLocaleString?.('en-US', { @@ -231,6 +235,7 @@ export const MultiAggregationPerColumn = () => ( })} ), + enableGrouping: false, Footer: () => ( Average Salary: @@ -244,9 +249,6 @@ export const MultiAggregationPerColumn = () => ( ), - accessorKey: 'salary', - aggregationFn: ['count', 'mean'], //multiple aggregation functions - enableGrouping: false, header: 'Salary', }, ]} diff --git a/packages/mantine-react-table/stories/features/CellActions.stories.tsx b/packages/mantine-react-table/stories/features/CellActions.stories.tsx index fa6f7dfdc..91a54715a 100644 --- a/packages/mantine-react-table/stories/features/CellActions.stories.tsx +++ b/packages/mantine-react-table/stories/features/CellActions.stories.tsx @@ -1,4 +1,5 @@ -import { type MRT_ColumnDef, MantineReactTable } from '../../src'; +import { MantineReactTable, type MRT_ColumnDef } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; import { IconCopy, IconDownload } from '@tabler/icons-react'; diff --git a/packages/mantine-react-table/stories/features/ClickToCopy.stories.tsx b/packages/mantine-react-table/stories/features/ClickToCopy.stories.tsx index 3034ae99c..5f49c9499 100644 --- a/packages/mantine-react-table/stories/features/ClickToCopy.stories.tsx +++ b/packages/mantine-react-table/stories/features/ClickToCopy.stories.tsx @@ -1,4 +1,5 @@ -import { type MRT_ColumnDef, MantineReactTable } from '../../src'; +import { MantineReactTable, type MRT_ColumnDef } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; diff --git a/packages/mantine-react-table/stories/features/ColumnActions.stories.tsx b/packages/mantine-react-table/stories/features/ColumnActions.stories.tsx index da359d919..61864fbb3 100644 --- a/packages/mantine-react-table/stories/features/ColumnActions.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnActions.stories.tsx @@ -1,5 +1,7 @@ import { Menu } from '@mantine/core'; -import { type MRT_ColumnDef, MantineReactTable } from '../../src'; + +import { MantineReactTable, type MRT_ColumnDef } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; diff --git a/packages/mantine-react-table/stories/features/ColumnDragging.stories.tsx b/packages/mantine-react-table/stories/features/ColumnDragging.stories.tsx index b55a858ef..e0c579f04 100644 --- a/packages/mantine-react-table/stories/features/ColumnDragging.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnDragging.stories.tsx @@ -1,4 +1,5 @@ -import { type MRT_ColumnDef, MantineReactTable } from '../../src'; +import { MantineReactTable, type MRT_ColumnDef } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; diff --git a/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx b/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx index 0f3114e32..cff3f7041 100644 --- a/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx @@ -1,9 +1,11 @@ import { useEffect, useMemo, useState } from 'react'; + import { + MantineReactTable, type MRT_Column, type MRT_ColumnDef, - MantineReactTable, } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; @@ -178,10 +180,10 @@ export const ColumnGroupingEnabledCustomAggregate = () => ( header: 'Last Name', }, { + accessorKey: 'gender', AggregatedCell: ({ cell }) => (
{cell.renderValue() as string}
), - accessorKey: 'gender', header: 'Gender', }, { diff --git a/packages/mantine-react-table/stories/features/ColumnHiding.stories.tsx b/packages/mantine-react-table/stories/features/ColumnHiding.stories.tsx index 543e2f9a2..0d43a212d 100644 --- a/packages/mantine-react-table/stories/features/ColumnHiding.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnHiding.stories.tsx @@ -1,4 +1,5 @@ -import { type MRT_ColumnDef, MantineReactTable } from '../../src'; +import { MantineReactTable, type MRT_ColumnDef } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; diff --git a/packages/mantine-react-table/stories/features/ColumnOrdering.stories.tsx b/packages/mantine-react-table/stories/features/ColumnOrdering.stories.tsx index 90cf8caaa..835443192 100644 --- a/packages/mantine-react-table/stories/features/ColumnOrdering.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnOrdering.stories.tsx @@ -1,4 +1,5 @@ -import { type MRT_ColumnDef, MantineReactTable } from '../../src'; +import { MantineReactTable, type MRT_ColumnDef } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; diff --git a/packages/mantine-react-table/stories/features/ColumnPinning.stories.tsx b/packages/mantine-react-table/stories/features/ColumnPinning.stories.tsx index 4f7e1e3a7..4cd0d3cca 100644 --- a/packages/mantine-react-table/stories/features/ColumnPinning.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnPinning.stories.tsx @@ -1,4 +1,5 @@ -import { type MRT_ColumnDef, MantineReactTable } from '../../src'; +import { MantineReactTable, type MRT_ColumnDef } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; diff --git a/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx b/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx index 630a57d19..8eba9287b 100644 --- a/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx @@ -1,5 +1,7 @@ import { DirectionProvider } from '@mantine/core'; -import { type MRT_ColumnDef, MantineReactTable } from '../../src'; + +import { MantineReactTable, type MRT_ColumnDef } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; diff --git a/packages/mantine-react-table/stories/features/Creating.stories.tsx b/packages/mantine-react-table/stories/features/Creating.stories.tsx index 8fdd932c7..48b8e0120 100644 --- a/packages/mantine-react-table/stories/features/Creating.stories.tsx +++ b/packages/mantine-react-table/stories/features/Creating.stories.tsx @@ -1,15 +1,18 @@ import { useState } from 'react'; -import { IconPlus } from '@tabler/icons-react'; -import { Button, ActionIcon, Select } from '@mantine/core'; + +import { ActionIcon, Button, Select } from '@mantine/core'; + import { - type MRT_TableOptions, - MantineReactTable, createRow, - MRT_Row, + MantineReactTable, + type MRT_Row, + type MRT_TableOptions, useMantineReactTable, } from '../../src'; + import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; +import { IconPlus } from '@tabler/icons-react'; const meta: Meta = { title: 'Features/Creating Examples', @@ -300,7 +303,7 @@ export const CreateRowIndexIndexExpanding = () => { initialState: { expanded: true }, onCreatingRowSave: () => {}, positionCreatingRow: creatingRowIndex, - renderRowActions: ({ row, renderedRowIndex, table }) => { + renderRowActions: ({ renderedRowIndex, row, table }) => { return ( { @@ -370,16 +373,16 @@ export const CreateWithCustomEditCell = () => { }, { accessorKey: 'state', - header: 'State', Edit: ({ cell }) => (