Rows and Columns

$5,668

Sales

Scrolling

To make the grid scrollable, set constant width and height to the container holding Handson table and set the overflow property to hidden in the container's stylesheet. Then, if the table contains enough rows or columns, you can scroll through it.

Note, that Handson table renders only the visible part of the table plus a fixed amount of rows and columns. You can experiment with the viewportColumnRenderingOffset and viewportRowRenderingOffset config options, which define this behavior, to improve the performance of your app.

Fixing

Specify two fixed rows with fixedRowsTop: 2 and two fixed columns with fixedColumnsLeft: 2 option.

Note: You'll need horizontal scrollbars, so just set a container width and overflow: hidden in CSS.

If you're looking for an option to manually fix columns, see the Freezing section of this documentation.

Resizing

To enable these features, use settings manualColumnResize: true and manualRowResize: true

The draggable resize handle appears:

  1. In the right part of the column header,
  2. In the bottom part of the row header.

Double click on the resize handle automatically adjusts size of the row or column.

For the selected rows or columns works simultaneously resize.

Moving

To enable these features, use settings manualColumnMove: true and manualRowMove: true

The draggable move handle appears:

  1. In the right part of the column header,
  2. In the top part of the row header.