Tutorial - Add a Table to the Home page
This tutorial guides you in adding a table to your home page.

SDLDemoMachine database

The table grabs data from the SDLDemoMachine. If you would like to see the fields in the SDLDemoMachine database, go to the static console and run c3Grid(SDLDemoMachine.fetch()).

Step 1 - Create table component

The UI Framework comes with many available components ready to use. One of the available components is a table component.
For more available components, go to UiDemo.
JSON Table component:
1
// exampleUI.customTableTypesBasic.json
2
{
3
"type": "UiSdlConnected<UiSdlDataGrid>",
4
"component": {
5
"paginationConfig": {
6
"pageSize": 5,
7
"pagination": true
8
},
9
"reorderableColumns": false,
10
"filterBar": false,
11
"dataSpec": {
12
"dataType": {
13
"typeName": "SDLDemoMachine"
14
},
15
"columnFields": [
16
{
17
"fieldName": "name",
18
"label": "SDLDemoMachine.name",
19
"searchable": true
20
},
21
{
22
"fieldName": "category",
23
"label": "SDLDemoMachine.category",
24
"searchable": true
25
},
26
{
27
"fieldName": "location.id",
28
"label": "SDLDemoMachine.location"
29
},
30
{
31
"fieldName": "statusLabel",
32
"label": "SDLDemoMachine.status"
33
}
34
]
35
}
36
}
37
}
Copied!

Step 2 - Add the Component to the Content

In order to access our table, we must reference the filename where we have the table configurations in the content layout page.
1
// exampleUI.HomeContent.json
2
{
3
"type": "UiSdlConnected<UiSdlLayoutBase>",
4
"component": {
5
"children": [
6
{
7
"id": "exampleUI.customTableTypesBasic"
8
}
9
]
10
11
}
12
}
Copied!

View the Output

Provision and bundle your changes.
Once provision and bundle has been completed, see your changes on UI IDE.