React Data Grid AutoRowSize
Description
The AutoRowSize plugin allows you to set row heights based on their highest cells.
By default, the plugin is declared as undefined, which makes it disabled (same as if it was declared as false).
Enabling this plugin may decrease the overall table performance, as it needs to calculate the heights of all cells to
resize the rows accordingly.
If you experience problems with the performance, try turning this feature off and declaring the row heights manually.
But, to display Handsontable's scrollbar (opens new window)
in a proper size, you need to enable the AutoRowSize plugin,
by setting the autoRowSize option to true.
Row height 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 rows) or a percentage value to a config object:
// as a number (300 rows in sync, rest async)
autoRowSize: {syncLimit: 300},
// as a string (percent)
autoRowSize: {syncLimit: '40%'},
// allow sample duplication
autoRowSize: {syncLimit: '40%', allowSampleDuplicates: true},
You can also use the allowSampleDuplicates option to allow sampling duplicate values when calculating the row
height. Note, that this might have a negative impact on performance.
To configure this plugin see Options#autoRowSize.
Example
const hotRef = useRef(null);
...
// First, let's contruct Handsontable
<HotTable
ref={hotRef}
data={getData()}
autoRowSize={true}
/>
...
// Access to plugin instance:
const hot = hotRef.current.hotInstance;
const plugin = hot.getPlugin('autoRowSize');
plugin.getRowHeight(4);
if (plugin.isEnabled()) {
// code...
}
Options
autoRowSize
Source code (opens new window)autoRowSize.autoRowSize : object | boolean
The autoRowSize option configures the AutoRowSize plugin.
You can set the autoRowSize option to one of the following:
| Setting | Description |
|---|---|
false | Disable the AutoRowSize plugin |
true | Enable the AutoRowSize plugin with the default configuration |
| An object | Enable the AutoRowSize plugin and modify the plugin options |
To give Handsontable's scrollbar (opens new window)
a proper size, set the autoRowSize option to true.
If you set the autoRowSize option to an object, you can set the following AutoRowSize plugin options:
| Property | Possible values | Description |
|---|---|---|
syncLimit | A number | A percentage string | The number/percentage of rows to keep in sync (default: 500) |
Using the rowHeights option forcibly disables the AutoRowSize plugin.
Read more:
Default: undefined
Example
autoRowSize: {
// keep 40% of rows in sync (the rest of rows: async)
syncLimit: '40%'
},
Members
inProgress
Source code (opens new window)autoRowSize.inProgress : boolean
true if the size calculation is in progress.
measuredRows
Source code (opens new window)autoRowSize.measuredRows : number
Number of already measured rows (we already know their sizes).
Methods
calculateAllRowsHeight
Source code (opens new window)autoRowSize.calculateAllRowsHeight(colRange)
Calculate all rows heights. The calculated row will be cached in the AutoRowSize#heights property. To retrieve height for specified row use AutoRowSize#getRowHeight method.
| Param | Type | Description |
|---|---|---|
| colRange | object number | Row index or an object with from and to properties which define row range. |
calculateRowsHeight
Source code (opens new window)autoRowSize.calculateRowsHeight(rowRange, colRange, [force])
Calculate a given rows height.
| Param | Type | Default | Description |
|---|---|---|---|
| rowRange | number object | Row index or an object with from and to indexes as a range. | |
| colRange | number object | Column index or an object with from and to indexes as a range. | |
| [force] | boolean | false | optional If true the calculation will be processed regardless of whether the width exists in the cache. |
clearCache
Source code (opens new window)autoRowSize.clearCache()
Clears cached heights.
clearCacheByRange
Source code (opens new window)autoRowSize.clearCacheByRange(range)
Clears cache by range.
| Param | Type | Description |
|---|---|---|
| range | object number | Row index or an object with from and to properties which define row range. |
destroy
Source code (opens new window)autoRowSize.destroy()
Destroys the plugin instance.
disablePlugin
Source code (opens new window)autoRowSize.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
enablePlugin
Source code (opens new window)autoRowSize.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
getColumnHeaderHeight
Source code (opens new window)autoRowSize.getColumnHeaderHeight() ⇒ number | undefined
Get the calculated column header height.
getFirstVisibleRow
Source code (opens new window)autoRowSize.getFirstVisibleRow() ⇒ number
Get the first visible row.
Returns: number - Returns row index, -1 if table is not rendered or if there are no rows to base the the calculations on.
getLastVisibleRow
Source code (opens new window)autoRowSize.getLastVisibleRow() ⇒ number
Gets the last visible row.
Returns: number - Returns row index or -1 if table is not rendered.
getRowHeight
Source code (opens new window)autoRowSize.getRowHeight(row, [defaultHeight]) ⇒ number
Get a row's height, as measured in the DOM.
The height returned includes 1 px of the row's bottom border.
Mind that this method is different from the
getRowHeight() method
of Handsontable's Core.
| Param | Type | Description |
|---|---|---|
| row | number | A visual row index. |
| [defaultHeight] | number | optional If no height is found, defaultHeight is returned instead. |
Returns: number - The height of the specified row, in pixels.
getSyncCalculationLimit
Source code (opens new window)autoRowSize.getSyncCalculationLimit() ⇒ number
Gets value which tells how many rows should be calculated synchronously (rest of the rows will be calculated
asynchronously). The limit is calculated based on syncLimit set to autoRowSize option (see Options#autoRowSize).
isEnabled
Source code (opens new window)autoRowSize.isEnabled() ⇒ boolean
Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit
hook and if it returns true then the AutoRowSize#enablePlugin method is called.
isNeedRecalculate
Source code (opens new window)autoRowSize.isNeedRecalculate() ⇒ boolean
Checks if all heights were calculated. If not then return true (need recalculate).
recalculateAllRowsHeight
Source code (opens new window)autoRowSize.recalculateAllRowsHeight()
Recalculates all rows height (overwrite cache values).