DocumentTable - ietf-tools/purple GitHub Wiki
DocumentTable
Props
Prop name |
Description |
Type |
Values |
Default |
columns |
Column definitions |
Array |
- |
|
data |
|
Array |
- |
|
rowKey |
The property to use as the unique key for each row |
string |
- |
|
loading |
Whether to show the loading animation or not |
boolean |
- |
|
Column Definition
The columns
property is an arrow of objects with the following possible options:
Option |
Type |
Description |
Required |
key |
String |
Unique ID for the column |
✅ |
label |
String |
Column title |
✅ |
field |
String |
Row property to use / sort on |
✅ |
format |
Function |
Optional lambda function to transform the cell value. e.g. (val) => val.toLowerCase() |
|
link |
Function |
Lambda function that returns a URL. The value will be displayed as clickable link. (row, val) => val.personUrl |
|
icon |
String |
If defined, the name of the icon to display to the left of the value. See the Iconify reference for all possible options. |
|
labels |
*Array |
Function* |
Either an array or a lambda function (e.g. row => row.labels ) that return an array of / a mix of:- strings (the labelDefaultColor will be used)- an object { label: 'something', color: 'rose' } |
labelDefaultColor |
String |
The fallback color name to use for a label when not explicitly provided. Any of the TailwindCSS color names, in lowercase. e.g. purple |
|
classes |
*String |
Function* |
List of space separated CSS classes to apply to the cell, or a lambda function e.g. (row) => row.fooBar |
sortable |
Boolean |
Whether the column can be sorted or not. Defaults to true . |
|