Table / Data grid

@react-form-builder/components-rsuite-table

Introduction

The Table component allows users to easily create and manage tables in their applications. It provides a flexible and customizable interface that can be adapted to different needs. Using Table, you can create tables with any number of rows and columns. This component is based on Table component. This component is included within the following NPM package: @react-form-builder/components-rsuite-table.

The table consists of several types of components:

• Column is used to display a single column of the table.
• Column group is used to group columns.
• Header cell is used to display the header of a table cell.
• Cell displays the contents of the column.

Using Table component

The table component differs from many other components in that it has an array of objects as a value. By default, the column headings and cell values are displayed in text. But you can use components to change the display of a cell. Let's turn to the examples of tables to visually show how the table works.

Basic

Form

JSON

Appearance

Form

JSON

Loading

Form

JSON

Table height

Form

JSON

Custom cell

Form

JSON

Resizable

Form

JSON

Fluid

Form

JSON

Sort

Form

JSON

Colspan

Form

JSON

Rowspan

Form

JSON

Summary

Form

JSON

Show full text of cells

Form

JSON

Word wrap

Form

JSON

Properties of table components

Table main properties

Name	Type	Description
Affix header	boolean	Affix the table header to the specified location on the page
Affix horizontal scrollbar	boolean	Affix the table horizontal scrollbar to the specified position on the page
Auto height	boolean	The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear
Bordered	boolean	Show border
Cell bordered	boolean	Show cell border
Data	array	Table data
Default sort type	choice	Sort type, Asc, Desc
Fill height	boolean	Force the height of the table to be equal to the height of its parent container. Cannot be used together with Auto height
Header height	number	Table header height
Height	number	Table height
Hover	boolean	The row of the table has a mouseover effect
Loading	boolean	Show loading
Max height	number	Maximum heigh
Min height	number	Minimum height
Row class name	string	Add an optional extra class name to row
Row height	number	Row height
Row key	string	Each row corresponds to the unique key in data
Should update scroll	boolean	Whether to update the scroll after the table size is updated
Show header	boolean	Display header
Sort column	string	Sort column name
Sort type	choice	Sort type, Asc, Desc
Virtualized	boolean	Effectively render large tabular data
Width	number	Table width
Word wrap	choice	Whether to appear line breaks where text overflows its content box, Break All, _Break Word or Keep All

Column main properties

Name	Type	Description
Align	choice	Alignment, left, center, or right
Col span	number	Merges column cells to merge when the Data key value for the merged column is null or undefined
Fixed	boolean	Fixed column
Flex grow	number	Set the column width automatically adjusts, when set Flex grow cannot set Resizable and Width property
Full text	boolean	Whether to display the full text of the cell content when the mouse is hovered
Min width	number	When you use Flex grow, you can set a minimum width
Resizable	boolean	Customizable resize column width
Row span	function	Merges rows on the specified column
Sortable	boolean	Sortable
Vertical align	boolean	Vertical alignment, top, middle or bottom
Width	number	Column width

Column group main properties

Name	Type	Description
Align	choice	Alignment, left, center, or right
Fixed	boolean	Fixed column group
Group header height	number	The height of the header of the merged cell group
Header	string	Group header
Vertical align	string	Vertical alignment, top, middle or bottom

Header cell main properties

Name	Type	Description
Content	string	Table column header

Cell main properties

Name	Type	Description
Data key	string	Data binding key, but also a sort of key