Table GridDocs on GitHub

Row Dropzone

Not applicable to tables with <table>


COLUMN TITLE 1
COLUMN TITLE 2
COLUMN TITLE 3
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta

API


Table Grid

import TableGrid from '@uixkit.react/components/TableGrid/index.tsx';
PropertyTypeDefaultDescription
dataJSON Object Literals-Specify data of Table as a JSON string format. Such as: usage:
{"headers": ["COLUMN TITLE 1","COLUMN TITLE 2"],"fields":[{"selected": false,"data": [{"cols": 1, "content": "Row Item Alpha" },{"cols": 1, "content": "Row Item Alpha" }]},{"selected": true,"data": [{"cols": 1, "content": "Row Item Bravo" },{"cols": 1, "content": "Row Item Bravo" }]}]}

JSON configuration properties of the data:

PropertyTypeDefaultDescription
fieldsarray-Table rows and columns. The key cols identifies the column (change the value if the column is merged). The key content to place the content of each cell. The key selected is used to activate a row. The key data is used to load the data of each column in each row. Eg. [{"selected": false,"data": [{"cols": 1, "content": "Row Item Alpha" },{"cols": 1, "content": "Row Item Alpha" }]},{"selected": true,"data": [{"cols": 1, "content": "Row Item Bravo" },{"cols": 1, "content": "Row Item Bravo" }]}]
headersarray-Defines a header cell in an HTML table. Eg. ["COLUMN TITLE 1","COLUMN TITLE 2"]