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 the Table component from @react-form-builder/components-rsuite-table.

The table consists of several types of components:

Column — used to display a single column of the table.
Column group — used to group columns.
Header cell — 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 uses an array of objects as its value. By default, the column headings and cell values are displayed as text. However, you can use components to customize how a cell is displayed. The following examples demonstrate how the table works in practice.

Basic

This is an example of a Basic table rendered with FormEngine.

Appearance

This is an example of an Appearance table with interactive controls for customization.

Loading

This is an example of a Loading table with toggle control to demonstrate loading state.

Table Height

This is an example of a Table Height table with interactive controls for managing table dimensions.

Custom Cell

This is an example of a Custom Cell table with custom cell rendering including avatars, progress bars, and formatted currency.

Resizable

This is an example of a Resizable table with resizable columns that can be adjusted by dragging column borders.

Fluid

This is an example of a Fluid table with flexible column layout using flexGrow for adaptive column sizing.

Colspan

This is an example of a Colspan table with column spanning and grouping for complex header structures.

Rowspan

This is an example of a Rowspan table with row spanning cells that merge across multiple rows.

Summary

This is an example of a Summary table with calculated totals displayed in column headers.

Show Full Text of Cells

This is an example of a Show Full Text of Cells table with full text display on hover for truncated content.

Word Wrap

This is an example of a Word Wrap table with word wrapping enabled for proper display of long text content.

Properties of table components

Table main properties

Prop	Type	Default	Description
affixHeader	boolean	-	Affix the table header to the specified location on the page.
affixHorizontalScrollbar	boolean	-	Affix the table horizontal scrollbar to the specified position on the page.
autoHeight	boolean	-	Automatically expand table height according to data rows. No vertical scrollbar will appear.
bordered	boolean	-	Show outer border of the table.
cellBordered	boolean	-	Show borders around individual cells.
data	array	-	Table data array.
defaultSortType	choice	-	Sort type, 'Asc' or 'Desc'.
fillHeight	boolean	-	Force table height to fill its parent container (cannot be used with Auto height).
headerHeight	number	-	Table header height.
height	number	-	Fixed table height.
hover	boolean	-	Enable hover effect for rows.
loading	boolean	-	Show loading state.
maxHeight	number	-	Maximum table height.
minHeight	number	-	Minimum table height.
rowClassName	string	-	Optional extra CSS class for each row.
rowHeight	number	-	Height of each row.
rowKey	string	-	Unique key for each data row.
shouldUpdateScroll	boolean	-	Whether to update scroll position after resizing the table.
showHeader	boolean	-	Display the header row.
sortColumn	string	-	Name of the column used for sorting.
sortType	choice	-	Sort direction, 'Asc' or 'Desc'.
virtualized	boolean	-	Enable virtualization for large data sets.
width	number	-	Table width.
wordWrap	choice	-	Controls line breaking inside cells: 'BreakAll', 'BreakWord', or 'KeepAll'.

Column main properties

Prop	Type	Default	Description
align	choice	-	Alignment of the column content: 'left', 'center', or 'right'.
colSpan	number	-	Merges column cells when the data key value for the merged column is null or undefined.
fixed	boolean	-	Set as a fixed column.
flexGrow	number	-	Automatically adjusts column width; cannot use with 'resizable' or 'width'.
fullText	boolean	-	Display full text of a cell when hovered.
minWidth	number	-	Minimum width of the column when flexGrow is used.
resizable	boolean	-	Enable manual resizing of the column.
rowSpan	function	-	Merge rows within this column.
sortable	boolean	-	Enable sorting for this column.
verticalAlign	boolean	-	Vertical alignment of content: 'top', 'middle', or 'bottom'.
width	number	-	Column width in pixels.

Column group main properties

Prop	Type	Default	Description
align	choice	-	Alignment of the group: 'left', 'center', or 'right'.
fixed	boolean	-	Set group as fixed.
groupHeaderHeight	number	-	Height of the merged group header cell.
header	string	-	Group header label.
verticalAlign	string	-	Vertical alignment: 'top', 'middle', or 'bottom'.

Header cell main properties

Prop	Type	Default	Description
content	string	-	Header text of the column.

Cell main properties

Prop	Type	Default	Description
dataKey	string	-	Data binding key, also used for sorting.

React Data Grid Component — FormEngine Table Guide