@terminusdb/terminusdb-react-table

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`
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"
	}
}

advancedSearchMatchType code

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}

AdvancedSearch Code Codesandbox