Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
A Software Development Kit (SDK) to build a UI from @terminusdb/terminusdb-documents-ui and the @terminusdb/terminusdb-react-table.
This template has components to assemble a dashboard quickly. You also have the option to use our base components like the FramesViewer and TDBReactTable.
Install the dependencies from npm
terminusdb-documents-ui-template
is a collection of hooks to connect with the TerminusCMS server and a number of templates (components) for building a dashboard.
The sandbox features an example and how to use the components and hooks to assemble your pages.
useTDBGraphqlQuery
is the main hook to connect @terminusdb/terminusdb-react-table with TerminusCMS server . To use it, pass it with an instance of ApolloClient.
useTDBGraphqlQuery(apolloClient:ApolloClient, graphqlQuery:gql, documentType:String, options:Object)
apolloClient : ApolloClient
Required
An Apollo Client instance with your connections settings
graphqlQuery : gql
Required
A GraphQL query
documentType : string
Required
The document type
options : object
The following options are supported via the main options object passed to useTDBGraphqlQuery
limit : number
Optional
The initial state value for limit
start : number
Optional
The initial state value for start
tableConfigObj: Object
Optional
The table configuration object
hiddenColumns : Array
Optional
The initial state object for hiddenColumnsArr
The following properties are available on the table instance returned from useTDBGraphqlQuery
state.loading : Bool
This is the current loading
value, located on the state, if true the hook is doing a server call
state.error: Object|Bool
This is the current error reporting object from the server, located on the state, the starting value is false
state.limit: Number
This is set the limit clause to select a limited number of records, The starting value is 10. Using the changeLimits
function will change the status of this property
state.start:Number
This is the pagination start value, pagination allows returning only a portion, rather than the whole, result set. The start value is 0. Use the changeLimits
function to change the status of this property
state.queryFilters:Object
This is the query filter status, this value is used to fill the filter value in the GraphQL query variables. Use the setAdvancedFilters
or changeFilters
functions to change the status of this property
state.queryOrders:Object
This is the query orderBy status. Use this value to fill the orderBy value in the graphql query variables. Use the changeOrders
function to change the status of this property
state.orderBy:Array
This is the table orderBy status, transform this value to create the queryOrders object. Use the changeOrders
function to change the status of this property
state.filterBy:Array
This is the table filter status, transform this value to create the queryFilters object. Use the changeFilters
function to change the status of this property
state.rowCount:Number
This is the current number of records loaded
state.documentResults:Array
The successful GraphQL query fetch result data
state.extractedData:Array
The successful GraphQL query fetch result data formatted for the table
state.hiddenColumnsArr:Array
Store the table hiddenColumns list. If a column's ID is contained in this array, it will be hidden using the setHiddenColumns
function
callGraphqlServer: Function(currentlimit:Number,currentstart:Number,queryOrders:Object,queryFilters:Object)
This function changes the limit
, the start
status, the queryOrders
, and the queryFilters
properties and calls the server with pagination, returning only a portion, rather than the whole, result.
changeLimits: Function(currentlimit:Number,currentstart:Number)
This function changes the limit
and start
status properties and calls the server with pagination, returning only a portion, rather than the whole, result.
changeOrders: Function(orderByArr:Array)
This function gets the graphqlTable orderByArr variable and transforms it in the GraphQL orderBy variables format.
Set the queryOrders
and orderBy
properties status to call the server with the current queryOrders
and queryFilters
status
changeFilters: Function(filtersArr:Array)
This function gets the graphqlTable filtersArr variable and transforms it in the GraphQL filters variables format.
Set the queryFilters
and filterBy
properties status to call the server with the current queryFilters
and queryOrders
status
setAdvancedFilters: Function(advfilter:Object)
This gets the advfilter in the GraphQL filters variables format
Set the queryFilters
reset the filterBy
properties status to call the server with the current queryFilters
and queryOrders
status
setHiddenColumns: Function(id:string, checked:bool)
This function is called to add or remove a columns ID to the hiddenColumns
status property
View the useTDBGraphqlQuery component integrated inside a dashboard here
useTDBGraphqlQuery source code
useTDBGraphqlQuery usage in the DocumentsGraphqlTable component
Learn how to include TerminusDB React Table components in your projects to display documents in an interactive table.
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
The following options are supported on any column object you can pass to columns.
TdbReactTable
CodeThe 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.
You can use the following method to format the advanced search fields
Properties | Description |
---|---|
Properties | Description |
---|---|
Properties | Description |
---|---|
Properties | 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, the default value is 10
totalRows:Number
The total number of rows
result:Array
The data array to display in the table
config
Table configuration. The main options are columns:Array<Column>
required - The core columns configuration object for the entire table. rowClick : Function
A function that acts as a callback when the table row is clicked
orderBy:Array
- An array of sorting objects. 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, a headersLabel array with the list of columns to add to the files, and a className to style the download button component
setFilters:Function
- 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
setOrder:Function
- A function that acts as a callback when the columns sort arrow is clicked. Implement your own sorting outside of the table
setLimits:Function(currentlimit:Number,currentstart:Number)
- 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
setHiddenColumns:Function(id:String, checked:Bool)
- A function that acts as a callback when the hide/show check box if clicked
accessor:String
- Function(originalRow, rowIndex) => any - Required - 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 as a 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 of a column.
disableFilters:Bool
- Disables filtering of the column.
renderer: String or Function
- Optional, - The available values for the string value are json
- number
- string
- image
. If you pass a function instead, this will receive the table instance and cell model as properties and return a JSX object or a string
filter:Object
- This object should have a type
property, the available values for type are : list
, number
, string
or boolean
. Use an options
object to set the operator for the filter to override the defaults
setFilter:Function(advFilter:Object)
A function that acts as a callback when the advanced filter Filter Data
button is clicked
fields:Object
The Advanced Search fields description
label:String
- Required - 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 operators
defaultOperator:String
- Optional - the default operator for the type
fieldSettings
- Optional - an Array of options for the valuetype ENUM
subfields
- Optional - a list of subfields for the type !group
valuetype Object
useTDBDocuments
is the main hook to connect @terminusdb/terminusdb-documents-ui with the TerminusCMS server. To use it, pass it with an instance of @terminusdb/terminusdb-client
useTDBDocuments(woqlClient:WOQLClient)
woqlClient : WOQLClient
Required
An WOQLClient instance with your connections settings
state.loading : Bool
This is the current loading
value, located on the state, if true the hook is doing a server call
state.error: Object|Bool
This is the current error reporting object from the server, located on the state, the starting value
state.perDocumentCount:Object|Bool
This is the current information about the number of documents, of every type, present in the database in a specific branch. The starting value is null, we need to call the getDocumentsNumber
function to fill this property status
state.totalDocumentCount:Number|Bool
This is the current information about the total number of documents present in the database in a specific branch, the starting value is null, we need to call the getDocumentsNumber
function to fill this property status
state.documentClasses:Array|Bool
This is the current information about the documents classes, the starting value is null, you need to call the getDocumentNumbers
or the getDocumentClasses
function to fill this property status
state.selectedDocument:Object|Bool
This is the current selected document object, the starting value is null, you need to call the getSelectedDocument
function to fill this property status
state.frame:Object|Bool
This is the current documents frames object, the starting value is false, you need to call the getDocumentFrames
function to fill this property status
state.documentTablesConfig:Object|Bool
This is the current document tables template, this property status stores the graphQL query for every document, the configuration for the tables, and the advanced search components. The starting value is null, you need to call the getGraphqlTablesConfig
function to fill this property status, after the call the status will either be the table config Object, or false if the call failed
setError: Function(value:Object|Bool)
This function sets the error property status.
getDocumentClasses: Function()
This function calls the TerminusDB server to get the database classes list and sets the documentClasses
property with the server response.
getDocumentNumbers: Function()
This function calls the TerminusDB server to get the database classes list and sets the documentClasses
property with the server response. It runs a query to get the total number of documents and the number of documents for type and fills the perDocumentCount
and the totalDocumentCount
getDocumentFrames: Function()
This function gets the current database frames and sets the frames
status property
getGraphqlTablesConfig: Function()
This function calls the TerminusDB server to get the GraphQL tables configuration and sets the getGraphqlTablesConfig
property status with the server response or error
if there was an error in the call.
createDocument: Function(jsonDocument:Object)
This function calls the server to create a new document in the current database
getSelectedDocument: Function(documentId:String)
Calls the server to get a document object and sets the selectedDocument
status property with the response
deleteDocument: Function(documentId:String)
Calls the server to delete a document
updateDocument: Function(jsonDocument:Object)
Calls the server to update a document
getDocumentById: Function(documentId:String)
Calls the server to get a document object and return it
View the useTDBDocuments component integrated inside a dashboard here
The DocumentClassesSummary
component allows you to visualize document classes using interactive cards.
Install the dependencies from npm
View the DocumentClassesSummary integrated inside a dashboard here
The EditDocumentComponent
allows you to edit an existing document using the FrameViewer component.
Install the dependencies from npm
View the EditDocumentComponent component integrated inside a dashboard here
The DocumentsGraphqlTable
component allows you to use GraphQL queries and visualize the results in a the TDBReactTable, you need to pass your instace of ApolloClient, the GraphQL query and the table and advanced search configuration. Read here for the configuration documentation.
Install the dependencies from npm
View the DocumentsGraphqlTable component integrated inside a dashboard here
The NewDocumentComponent
allows you to create new documents using the FrameViewer.
Install the dependencies from npm
View the NewDocumentComponent integrated inside a dashboard here
The ListDocumentsComponent
element allows you to visualize the documents inside the TDBReactTable and query the documents using the advanced search component.
Install the dependencies from npm
View the ListDocumentsComponent integrated inside a dashboard here
Properties | Description |
---|---|
Properties | Description |
---|---|
Properties | Description |
---|---|
Properties | Description |
---|---|
Properties | Description |
---|---|
The ViewDocumentComponent
allows you to view existing documents using the component.
Properties | Description |
---|
totalDocumentCount
The total number of documents
perDocumentCount
The number of documents for a type
onDocumentClick
A function that acts as a callback when the document class card is clicked
type
The document type
documentJson
The document object
documentID
The document ID
frames
The database Class Frame, or object of all class frames
closeButtonClick
A function that acts as a callback when the panel exit x
button is clicked
updateDocument
A function that acts as a callback when the submit
button is clicked
SearchComponent
A react component used as search component
type
The document type
gqlQuery
The GraphQL query
apolloClient
An apollo client instance - Apollo Client documentation
tableConfig
An object with the table configuration to pass to the TDBReactTable Component
advancedSearchConfig
An object with the advancedSearch configuration to pass to the AdvancedSearch Component
onRowClick
A function that acts as a callback when the table row is clicked
onViewButtonClick
A function that acts as a callback when the table row view button is clicked
onEditButtonClick
A function that acts as a callback when the table row edit button is clicked
onDeleteButtonClick
A function that acts as a callback when the table row delete button is clicked
showGraphqlTab
A boolean property to enable the GraphQL query view tab
type
The document type
documentJson
The document object, it is empty ({}) for new
createDocument
A function that acts as a callback when the submit
button is clicked
frames
The database Class Frame, or object of all class frames
closeButtonClick
A function that acts as a callback when the panel exit x
button is clicked
SearchComponent
A react component used as search component
type
The document type
gqlQuery
The graphql query
apolloClient
An apollo client instance - documentation
tableConfig
An object with the table configuration to pass to the TDBReactTable Component
advancedSearchConfig
An object with the advancedSearch configuration to pass to the Advanced Search Component
onRowClick
A function that acts as a callback when the table row is clicked
onViewButtonClick
A function that acts as a callback when the table row view button is clicked
onEditButtonClick
A function that acts as a callback when the table row edit button is clicked
onDeleteButtonClick
A function that acts as a callback when the table row delete button is clicked
onCreateButtonClick
A function that acts as a callback when the create button is clicked
showGraphqlTab
A boolean property that enables the GraphQL query view tab
type | The document type |
documentID | The document ID |
documentJson | The document object |
frames | The database Class Frame, or object of all class frames |
closeButtonClick | A function that acts as a callback when the panel exit |
deleteDocument | A function that acts as a callback when the delete button is clicked |
editDocument | A function that acts as a callback when the edit button is clicked |
getDocumentById | A function that acts as a callback when the a link property (a link to another document) is clicked inside the document interface |