React Data GridAutoColumnSize

Description
Options
- autoColumnSize
Members
- inProgress
- measuredColumns
Methods

Description

This plugin allows to set column widths based on their widest cells.

By default, the plugin is declared as undefined, which makes it enabled (same as if it was declared as true). Enabling this plugin may decrease the overall table performance, as it needs to calculate the widths of all cells to resize the columns accordingly. If you experience problems with the performance, try turning this feature off and declaring the column widths manually.

Column width calculations are divided into sync and async part. Each of this parts has their own advantages and disadvantages. Synchronous calculations are faster but they block the browser UI, while the slower asynchronous operations don't block the browser UI.

To configure the sync/async distribution, you can pass an absolute value (number of columns) or a percentage value to a config object:

// as a number (300 columns in sync, rest async)
autoColumnSize: {syncLimit: 300},

// as a string (percent)
autoColumnSize: {syncLimit: '40%'},

The plugin uses GhostTable and SamplesGenerator for calculations. First, SamplesGenerator prepares samples of data with its coordinates. Next GhostTable uses coordinates to get cells' renderers and append all to the DOM through DocumentFragment.

Sampling accepts additional options:

samplingRatio - Defines how many samples for the same length will be used to calculate. Default is 3.

  autoColumnSize: {
    samplingRatio: 10,
  }

allowSampleDuplicates - Defines if duplicated values might be used in sampling. Default is false.

  autoColumnSize: {
    allowSampleDuplicates: true,
  }

To configure this plugin see Options#autoColumnSize.

Example

const hotRef = useRef(null);

...

// First, let's contruct Handsontable
<HotTable
  ref={hotRef}
  data={getData()}
  autoColumnSize={true}
/>

...

// Access to plugin instance:
const hot = hotRef.current.hotInstance;
const plugin = hot.getPlugin('autoColumnSize');

plugin.getColumnWidth(4);

if (plugin.isEnabled()) {
  // code...
}

Setting	Description
`false`	Disable the `AutoColumnSize` plugin
`true`	Enable the `AutoColumnSize` plugin with the default configuration
An object	Enable the `AutoColumnSize` plugin and modify the plugin options

Property	Possible values	Description
`syncLimit`	A number \| A percentage string	The number/percentage of columns to keep in sync (default: `50`)
`useHeaders`	`true` \| `false`	When calculating column widths: `true`: use column headers `false`: don't use column headers
`samplingRatio`	A number	The number of samples of the same length to be used in column width calculations
`allowSampleDuplicates`	`true` \| `false`	When calculating column widths: `true`: Allow duplicate samples `false`: Don't allow duplicate samples

Param	Type	Default	Description
rowRange	`object` `number`		Row index or an object with `from` and `to` properties which define row range.
[overwriteCache]	`boolean`	`false`	`optional` If `true` the calculation will be processed regardless of whether the width exists in the cache.

Param	Type	Default	Description
colRange	`number` `object`		Visual column index or an object with `from` and `to` visual indexes as a range.
rowRange	`number` `object`		Visual row index or an object with `from` and `to` visual indexes as a range.
[overwriteCache]	`boolean`	`false`	`optional` If `true` the calculation will be processed regardless of whether the width exists in the cache.

Param	Type	Default	Description
column	`number`		Visual column index.
[defaultWidth]	`number`		`optional` Default column width. It will be picked up if no calculated width found.
[keepMinimum]	`boolean`	`true`	`optional` If `true` then returned value won't be smaller then 50 (default column width).