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.

Installation

Use the following command to install the package:

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

Then import the stylesheet. This package does not load CSS automatically:

import '@react-form-builder/components-rsuite-table/assets/styles.css'

Connection to FormBuilder component

The example below assumes that you also have the components from the @react-form-builder/components-rsuite package installed and the table components are additionally attached:

import {rSuiteComponents} from '@react-form-builder/components-rsuite'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'
import {rSuiteTableComponents} from '@react-form-builder/components-rsuite-table'

import '@react-form-builder/components-rsuite-table/assets/styles.css'

const components = [
  ...rSuiteComponents,
  ...rSuiteTableComponents,
].map((c) => c.build())
const builderView = new BuilderView(components)

function App() {
  return <FormBuilder view={builderView}/>
}

Connect to FormViewer component

The example below shows how to connect the table components along with the @react-form-builder/components-rsuite components:

import {tableModels} from '@react-form-builder/components-rsuite-table'
import {rSuiteComponents} from '@react-form-builder/components-rsuite'
import {FormViewer, View} from '@react-form-builder/core'

import '@react-form-builder/components-rsuite-table/assets/styles.css'

const view = new View([
  ...rSuiteComponents.map((c) => c.build().model),
  ...tableModels,
])

const form = `{
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "table",
        "type": "RsTable",
        "props": {
          "height": {"value": 200},
          "data": {"value": [{"name": "Alex"}]}
        },
        "children": [
          {
            "key": "nameColumn",
            "type": "RsColumn",
            "props": {"width": {"value": 180}},
            "children": [
              {
                "key": "nameHeader",
                "type": "RsHeaderCell",
                "props": {"children": {"value": "Name"}}
              },
              {
                "key": "nameCell",
                "type": "RsCell",
                "props": {"dataKey": {"value": "name"}}
              }
            ]
          }
        ]
      }
    ]
  }
}`

function App() {
  return <FormViewer view={view} getForm={() => form}/>
}

Using Table component

The table value is an array of objects. In the viewer, a header cell shows its text, and a cell shows its child components or the value at its data key. In the designer, the table is a column grid, so you can select the table, a column, or a cell on the canvas. Row data stays off that grid until Show data in designer is on. You can place components in a cell to change what it displays. The examples below show the viewer.

Basic

Appearance

Loading

Table height

Custom cell

Resizable

Fluid

Sort

Colspan

Rowspan

Summary

Show full text of cells

Word wrap

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 height
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 data in designer	boolean	Display table data on the canvas in design mode
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	choice	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	choice	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
Children	node	Components rendered in the cell