Skip to content

Creating a DataTable Component

Create a component using schematics and name it with your initial E.g:

jd-datatable

We are going to make it render the Material UI's table at https://material-ui.com/components/tables#data-table, which displays a set of data, similar to the existing sc-datatables.

To do this:

  1. Install the @material-ui/core module with:

    yarn add @material-ui/core

  2. Import the Data Grid libraries in src/components/JdDatatable.tsx with:

    import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

  3. Import the WithGrid wrapper:

    import WithGrid from '../utils/WithGrid';

  4. Let's use this example and this to your datatable's component definition:

    json { "componentName": "jd-datatable", "label": "Component List", "name": "grid", "filter": "{'query':{'bool':{'must':[{'match':{'systemHeader.systemType':{'query':'component'}}}, {'match':{'appTags':'system'}}, {'match':{'appTags':'componentDefinition'}}]}}, 'sort':[{'systemHeader.summaryName':'asc'}]}", "gridColumns": [ { "displayName": "Name", "field": "name" }, { "displayName": "Version Number", "field": "versionNumber" }, { "displayName": "Version Comment", "field": "versionInfo", "type": "string" } ], "fullWidth": true } This filter query will fetch data with "systemHeader.systemType" of "component".

  5. Replace the component properties with:

    javascript const JdDatatable = ({ fieldValue, componentDefinition, columns, loading, rows }) 6. The WithGrid wrapper will give us columns, loading, rows variables. We now wrap the whole component, change the bottom part with:

    ```javascript const wrapped = WithGrid(JdDatatable); convertToCustomElement('jd-datatable', wrapped);

    export default wrapped; 7. We can now use the rows and columns variables, replace the JSX:html

    jd-datatable works. Please edit src/components/JdDatatable.tsx to make changes

    Next Steps

      . . . .
    ``` To:

html <TableContainer component={Paper}> <Table aria-label="simple table"> <TableHead> <TableRow> { columns && columns.map(c => <TableCell>{c.displayName}</TableCell>) } </TableRow> </TableHead> <TableBody> {rows.map((row) => ( <TableRow key={row.name}> { columns && columns.map(c => <TableCell component="th" scope="row"> {row[c.field]} </TableCell>) } </TableRow> ))} </TableBody> </Table> </TableContainer>

You should see the component build in the npm watch window:

webpack 5.14.0 compiled <span style="color:green">successfully</span> in 208 ms

  1. Reload the component test template. A datatable will display:

    Datatable

This example is available at https://github.com/formbird-components/component-examples/tree/master/jd-datatable

You can now enhance this like adding search, pagination, and sort. There are examples you can follow at https://material-ui.com/components/tables/#data-table. You can also experiment data grids other than material-ui: * https://www.ag-grid.com/documentation/javascript/ * https://ant.design/components/table/ * https://www.primefaces.org/primereact/showcase/#/datatable/basic * https://adazzle.github.io/react-data-grid/