kwikid-components-react
Version:
KwikID's Component Library in React
133 lines (132 loc) • 4.41 kB
JSON
{
"config": {
"layout": {
"id": "interactive-data-table-layout",
"styles": "width: 100%; max-width: 1200px; margin: 2rem auto; font-family: system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);",
"components": [
{
"id": "table-header",
"type": "div",
"styles": "background: linear-gradient(to right, #1e3a8a, #3b82f6); color: white; padding: 1.5rem;",
"components": [
{
"id": "table-title",
"type": "h2",
"value": "Interactive KYC Document Dashboard",
"styles": "margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em;"
},
{
"id": "table-subtitle",
"type": "p",
"value": "Live monitoring of all customer document verification statuses.",
"styles": "margin: 0.25rem 0 0 0; opacity: 0.85; font-size: 1rem;"
}
]
},
{
"id": "table-container",
"type": "div",
"styles": "padding: 0; background-color: #ffffff;",
"components": [
{
"id": "awesome-kwikui-table",
"type": "table",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.documentImages"
}
}
},
"props": {
"title": "Document Verification Records",
"columns": [
{
"name": "title",
"label": "Document Name",
"options": {
"filter": true,
"sort": true,
"filterType": "textField"
}
},
{
"name": "type",
"label": "Category",
"options": {
"filter": true,
"sort": true,
"filterType": "dropdown"
}
},
{
"name": "status",
"label": "Verification Status",
"options": {
"filter": true,
"sort": true,
"filterType": "checkbox"
}
},
{
"name": "uploadedOn",
"label": "Submission Date",
"options": {
"filter": false,
"sort": true
}
},
{
"name": "id",
"label": "Document ID",
"options": {
"display": "excluded"
}
},
{
"name": "imageUrl",
"label": "Image URL",
"options": {
"display": "excluded"
}
},
{
"name": "description",
"label": "Description",
"options": {
"display": "excluded"
}
}
],
"options": {
"rowsPerPage": 5,
"rowsPerPageOptions": [
5,
10,
25,
50
],
"search": true,
"searchPlaceholder": "Search by document name...",
"pagination": true,
"filter": true,
"sort": true,
"selectableRows": "multiple",
"responsive": "standard",
"download": true,
"print": true,
"viewColumns": true,
"filterType": "dropdown",
"elevation": 0,
"tableBodyHeight": "400px"
}
}
}
]
}
]
}
}
}