diff --git a/apps/material-react-table-docs/pages/docs/api/mrt-hooks.mdx b/apps/material-react-table-docs/pages/docs/api/mrt-hooks.mdx index 14eaa4e02..79b572ab0 100644 --- a/apps/material-react-table-docs/pages/docs/api/mrt-hooks.mdx +++ b/apps/material-react-table-docs/pages/docs/api/mrt-hooks.mdx @@ -76,13 +76,7 @@ const table = useMRT_TableInstance({ }); ``` -This hook also uses the [`useMRT_DisplayColumns`](#usemrt_displaycolumns) and [`useMRT_Effects`](#usemrt_effects) to generate the built-in display columns (row numbers, actions, selection, etc) and house some extra useEffect hooks needed by some MRT features on a table wide level. - -### useMRT_DisplayColumns - -[Source Code](https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx) - -This hook is responsible for generating the built-in display columns (row numbers, actions, selection, etc) and adding them to the table instance's columns array, alongside your own defined columns. +This hook also uses the [`useMRT_Effects`](#usemrt_effects) ### useMRT_Effects @@ -121,7 +115,10 @@ return rows.map((row) => { This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Column Virtualizer instance that is optimized for MRT table columns, with considerations for other MRT features like column pinning, column resizing, column hiding, and more. ```tsx -import { useMaterialReactTable, useMRT_ColumnVirtualizer } from 'material-react-table'; +import { + useMaterialReactTable, + useMRT_ColumnVirtualizer, +} from 'material-react-table'; const table = useMaterialReactTable({ ...options, @@ -141,7 +138,10 @@ You would only need to use this hook if you are writing a custom headless table This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Row Virtualizer instance that is optimized for MRT table rows, with considerations for other MRT features like row pinning, row dragging, and more. ```tsx -import { useMaterialReactTable, useMRT_RowVirtualizer } from 'material-react-table'; +import { + useMaterialReactTable, + useMRT_RowVirtualizer, +} from 'material-react-table'; const table = useMaterialReactTable({ ...options, @@ -150,4 +150,4 @@ const table = useMaterialReactTable({ const rowVirtualizer = useMRT_RowVirtualizer(table); ``` -You would only need to use this hook if you are writing a custom headless table and want the same default row virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component. \ No newline at end of file +You would only need to use this hook if you are writing a custom headless table and want the same default row virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component. diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_DisplayColumns.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_DisplayColumns.tsx index 01cedef43..48d43fd40 100644 --- a/packages/material-react-table/src/hooks/display-columns/getMRT_DisplayColumns.tsx +++ b/packages/material-react-table/src/hooks/display-columns/getMRT_DisplayColumns.tsx @@ -14,7 +14,6 @@ import { getMRT_RowSpacerColumnDef } from './getMRT_RowSpacerColumnDef'; export const getMRT_DisplayColumns = ( tableOptions: MRT_StatefulTableOptions, ): MRT_ColumnDef[] => { - console.log('useMRT_DisplayColumns'); return [ getMRT_RowNumbersColumnDef(tableOptions), getMRT_RowSelectColumnDef(tableOptions), diff --git a/packages/material-react-table/src/hooks/useMRT_TableInstance.ts b/packages/material-react-table/src/hooks/useMRT_TableInstance.ts index 53fb4966c..ad96c114b 100644 --- a/packages/material-react-table/src/hooks/useMRT_TableInstance.ts +++ b/packages/material-react-table/src/hooks/useMRT_TableInstance.ts @@ -93,14 +93,7 @@ export const useMRT_TableInstance = ( ); const [columnSizingInfo, onColumnSizingInfoChange] = useState( - initialState.columnSizingInfo ?? { - columnSizingStart: [], - deltaOffset: null, - deltaPercentage: null, - isResizingColumn: false, - startOffset: null, - startSize: null, - }, + initialState.columnSizingInfo ?? ({} as MRT_ColumnSizingInfoState), ); const [density, setDensity] = useState( initialState?.density ?? 'comfortable', @@ -172,15 +165,18 @@ export const useMRT_TableInstance = ( const tableOptions = _tableOptions as MRT_StatefulTableOptions; - tableOptions.columns = prepareColumns({ - columnDefs: [ - ...getMRT_DisplayColumns(tableOptions), - ...tableOptions.columns, - ], - tableOptions, - }); - - console.log('create column defs'); + //don't recompute columnDefs while resizing column. + const columnDefsRef = useRef[]>([]); + tableOptions.columns = tableOptions.state.columnSizingInfo.isResizingColumn + ? columnDefsRef.current + : prepareColumns({ + columnDefs: [ + ...getMRT_DisplayColumns(tableOptions), + ...tableOptions.columns, + ], + tableOptions, + }); + columnDefsRef.current = tableOptions.columns; tableOptions.data = useMemo( () => diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts index 57172d96e..5a2e248eb 100644 --- a/packages/material-react-table/src/types.ts +++ b/packages/material-react-table/src/types.ts @@ -344,6 +344,7 @@ export type MRT_StatefulTableOptions = MRT_TableState, | 'columnFilterFns' | 'columnOrder' + | 'columnSizingInfo' | 'creatingRow' | 'density' | 'draggingColumn'