DevExtremeReactive
Version 2.7.4DemosDocsBlogGitHubBuy

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.
resizingMode? string widget Specifies the resizing mode: widget or nextColumn. In widget mode, auto and percentage values cannot be used to specify column widths.

Interfaces

TableColumnWidthInfo

Describes an object that specifies a column width.

Field Type Description
columnName string A column name.
width number | string A column width in pixels or CSS-accepted units (auto, px, %, em, rem, vm, vh, vmin, vmax).

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.
columnResizingMode Getter string Specifies the resizing mode: widget or nextColumn.
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.

Grid

Chart

Scheduler

Common Concepts

Core