TDB React Table
Learn how to include TerminusDB React Table components in your projects to display documents in an interactive table.
Installation
The best way to use @terminusdb/terminusdb-react-table is via the npm package that you can install with npm (or yarn if you prefer).
npm install @terminusdb/terminusdb-react-table
The library has two main components TDBReactTable
and AdvancedSearch
TDBReactTable
Properties
Properties | Description |
---|---|
| The pagination start value, we view the row from start to start+limit |
| Determines the amount of rows on any given page, the default value is 10 |
| The total number of rows |
| The data array to display in the table |
| Table configuration. The main options are |
| - An array of sorting objects. The sorting object should contain an |
| - An array of objects, each having a column |
| - The download config object should contain an filename for the file output, a headersLabel array with the list of columns to add to the files, and a className to style the download button component |
| - A function that acts as a callback when the columns input filter is filled and the Enter key if pressed, row filters need to be implemented outside of the table |
| - A function that acts as a callback when the columns sort arrow is clicked. Implement your own sorting outside of the table |
| - A function that acts as a callback when the pageSize or the pageIndex changes in the table. You should implement your own sorting outside of the table |
| - A function that acts as a callback when the hide/show check box if clicked |
Column Options
The following options are supported on any column object you can pass to columns.
Properties | Description |
---|---|
| - Function(originalRow, rowIndex) => any - Required - This string/function is used to build the data model for your column. |
| - Required - This is the unique ID for the column. It is used as a reference in things like sorting, grouping, filtering etc. |
| - Optional, the column title, the id will used if this property is not provided |
| - Optional |
| - Optional |
| - Optional |
| - Disables sorting of a column. |
| - Disables filtering of the column. |
| - Optional, - The available values for the string value are |
| - This object should have a |
Usage
Example TdbReactTable
Code
TdbReactTable
CodeAdvancedSearch
Properties
Properties | Description |
---|---|
| A function that acts as a callback when the advanced filter |
| The Advanced Search fields description |
Fields Options
The following options are supported on any files object that you can pass to field, the keys in fields are the ID of the field itself.
Properties | Description |
---|---|
| - Required - the field label |
| - Required - is the field widget match type for GraphQL |
| - Required - for the default widget this is always ["value"] |
| - Required - the GraphQL value type (String,BigInt ) |
| - Optional - an Array of available operators |
| - Optional - the default operator for the type |
| - Optional - an Array of options for the valuetype ENUM |
| - Optional - a list of subfields for the type |
You can use the following method to format the advanced search fields
Code Examples of Advanced Search
Last updated