@terminusdb/terminusdb-react-table v6.0.10
TerminusDB React Table
Learn how to include TerminusDB React Table components in your project.
Installation
The best way to use @terminusdb/terminusdb-react-table is via the npm package which you can install with npm (or yarn if you prefer).
npm install @terminusdb/terminusdb-react-table
the library contents two main components TDBReactTable
and AdvancedSearch
TDBReactTable
Props
props | description |
---|---|
start:Number | the pagination start value, we view the row from start to start+limit |
limit:Number | Determines the amount of rows on any given page, 10 is the default value |
totalRows:Number | The total number of row |
result:Array | The data array that you want to display on the table |
config | The table configuration the main options are columns:Array<Column> required - The core columns configuration object for the entire table. rowClick : Function A function which acts as a callback when the table row is clicked |
orderBy:Array | - An array of sorting object. the sorting object should contain an id key with the corresponding column ID to sort by. An optional desc key (defaults to false ) . This information is stored in state |
filterBy:Array | - An array of objects, each having a column id and a corresponding filter value . This information is stored in state |
downloadConfig:Object | - The download config object should contain an filename for the file output, an headersLabel array with the list of the columns to add to the files and a className to styling the download button component |
setFilters:Function | - A function which acts as a callback when the columns input filter is setter and the Enter key if pressed, your should implement your own row filter outside of the table |
setOrder:Function | - A function which acts as a callback when the columns sort arrow is clicked. You should implement your own sorting outside of the table |
setLimits:Function(currentlimit:Number,currentstart:Number) | - A function which act as a callback when the pageSize or the pageIndex change in the table. You should implement your own sorting outside of the table |
setHiddenColumns:Function(id:String, checked:Bool) | - A function which act 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.
| props |description |
|---|---|
| accessor:String|Function(originalRow, rowIndex) => any
| - Require - This string/function is used to build the data model for your column.
| id: String
| - Required - This is the unique ID for the column. It is used by reference in things like sorting, grouping, filtering etc.
|Header: String
| - Optional, the column title, the id will used if this property is not provided
|width:Number
| - Optional |
|minWidth: Number
| - Optional |
|maxWidth: Number
| - Optional |
|disableSortBy : Bool
| - Disables sorting for the column.
|disableFilters:Bool
| - Disables filter for the column.
|renderer: String or Function
| - Optional, - The available value for the string value are json
- number
- string
- image
, If you pass a function instead this will receives the table instance and cell model as props and should return a JSX object or a string
|filter:Object
| - This object should have a type
property, the available value for type are : list
, number
, string
or boolean
and an options
object where you can set the operator for the filter if you would like to override the default one
Usage
import React, {useState,useEffect} from 'react';
import {TDBReactTable} from '@terminusdb/terminusdb-react-table'
import {columnsConfiguration} from './columnsConfiguration'
import data from './data.json'
import './terminusdb-react-table-main.css'
import {Container,Alert,Row} from "react-bootstrap"
const App = (props) =>{
const [rowSelected, setRowSelected] = useState(false)
const [limit, setLimit] = useState(5)
const [start, setStart] = useState(0)
const [filter, setFilter] = useState([])
const [order, setOrder] = useState([])
const hiddenColumnsArr = ['_id','desc','MGLT','length', 'cost_in_credits','max_atmosphering_speed','_speed','crew',
'passengers','cargo_capacity','consumables','hyperdrive_rating',
'starship_class','created,edited','url']
const [dataWithPagination, setData] = useState(data)
const onRowClick = (row) =>{
setRowSelected(row.original['fullID'])
}
const tableConfigObj = {}
tableConfigObj.columns = columnsConfiguration
tableConfigObj.rowClick = onRowClick
const setHiddenColumns = (id, selected)=>{
//implement a setHiddenColumns function to store the status
}
const changeFilters = (filterArr)=>{setFilter(filterArr)}
const changeLimits = (currentlimit,currentpage)=>
setLimit(currentlimit)
setStart(currentpage)
}
const changeOrders = (orderArr)=>{setOrder(orderArr)}
useEffect(() => {
const tmpData = data.slice(start,(limit+start))
setData(tmpData)
},[limit,start])
return <Container className='my-5'>
<Alert><pre>{`Row selected id ${rowSelected}`}
You need to Impemant a logic to change the Hidden status</pre> </Alert>
<Alert><pre>{`YOU NEED TO IMPLEMENT A FILTER LOGIC, Table filter ${JSON.stringify(filter)}`}</pre></Alert>
<Alert><pre>{`YOU NEED TO IMPLEMENT AN ORDER LOGIC, Table order ${JSON.stringify(order)}`}</pre></Alert>
<Row className='width-100 overflow-auto text-break' >
<TDBReactTable
result={dataWithPagination}
config ={tableConfigObj}
hiddenColumnsArr = {hiddenColumnsArr}
setHiddenColumns = {setHiddenColumns}
limit={limit}
start={start}
orderBy={[]}
filterBy={[]}
setFilters = {changeFilters}
setLimits={changeLimits}
setOrder={changeOrders}
loading={false}
totalRows={10}
/>
</Row>
</Container>
}
export default App;
TdbReactTable Code Codesandbox
AdvancedSearch
Props
props | description |
---|---|
setFilter:Function(advFilter:Object) | A function which act as a callback when the advanced filter Filter Data button is clicked |
fields:Object | the Advanced Search fields description |
fields Options
The following options are supported on any files object you can pass to field, the keys in fields is the name of id of the field itself.
props | description |
---|---|
label:String | - Required - is the field label |
type:string | - Required - is the field widget match type for graphql |
valueSources:Array | - Required - for the default widget this is always "value" |
typeValue:String | - Required - the graphql value type (String,BigInt ) |
operators:Array | - Optional - an Array of available operator |
defaultOperator:String | - Optional - the default operator for the type |
fieldSettings | - Optional - an Array of options for the type select valuetype ENUM |
subfields | - Optional - a list of subfield for the type !group valuetype Object |
{"myfield":{
"label":"myfiledLabel",
"type":"text",
"valueSources":["value"],
"typevalue":"String"
}
}
you can use the follow method to format the advancedSearch fields
import {advancedSearchMatchType} from "@terminusdb/terminusdb-react-table/advancedSearchUtils"
const stringFormat = advancedSearchMatchType("String")
stringFormat.label= "myPropertyName"
const fields = {"myPropertyName" : stringFormat}
5 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
4 years ago
4 years ago