TableColumnResizing Plugin Reference

A plugin that manages table column widths.

Import

Use the following statement to import a plugin with embedded theme components:

import { TableColumnResizing } from '@devexpress/dx-react-grid-material-ui';
// import { TableColumnResizing } from '@devexpress/dx-react-grid-bootstrap4';
// import { TableColumnResizing } from '@devexpress/dx-react-grid-bootstrap3';

If you want to use custom components, you can import the themeless plugin:

import { TableColumnResizing } from '@devexpress/dx-react-grid';

User Reference

Dependencies

Properties

Name Type Default Description
columnWidths? Array<TableColumnWidthInfo>   Specifies column widths.
minColumnWidth? number 45 for Bootstrap3; 55 for Bootstrap4; 40 for Material-UI; Specifies a column’s minimum width.
maxColumnWidth? number Infinity Specifies a column’s maximum width.
defaultColumnWidths? Array<TableColumnWidthInfo> [] Specifies initial column widths in uncontrolled mode.
onColumnWidthsChange? (nextColumnWidths: Array<TableColumnWidthInfo>) => void   Handles column width changes.
columnExtensions? Array<TableColumnResizing.ColumnExtension> [] Additional column properties that the plugin can handle.

Interfaces

TableColumnWidthInfo

Describes an object that specifies a column width.

Field Type Description
columnName string A column name.
width number A column width.

TableColumnResizing.ColumnExtension

Describes additional column properties that the plugin can handle.

Field Type Description
columnName string The name of a column to extend.
minWidth? number A minimum column width.
maxWidth? number A maximum column width.

Plugin Developer Reference

Imports

Name Plugin Type Description
tableColumns Getter Array<TableColumn> Table columns whose width the plugin manages.

Exports

Name Plugin Type Description
tableColumns Getter Array<TableColumn> Table columns with new width values applied.
tableColumnResizingEnabled Getter boolean Specifies whether table column resizing is enabled.
changeTableColumnWidth Action ({ columnName: string, shift: number }) => void Changes the specified column width. The column width is increased by the corresponding shift value, or decreased if the value is negative.
draftTableColumnWidth Action ({ columnName: string, shift: number }) => void Changes the specified column width used for preview. The column width is increased by the corresponding shift value, or decreased if the value is less than zero.
cancelTableColumnWidthDraft Action () => void Cancels changes to the column width used for preview.