Data Grid Component

Data grid is a customizable frontend component to render a table of items It uses React table under the hood. It is recommended if you want a greater level of control over your table.

Basic Table

// import the component
import DataGrid from "sections/tables/data-grid/DataGrid";

export default function ItemsTable() {
  // If you are using a context.
  return <YourProvider>
           <ItemsTableWrapped />
         </YourProvider>
}

function ItemsTableWrapped() {
  // Load your data.
  var { loading, data, deleteItem } = useContext(YourContext);
  // Create your columns
  var columns = useMemo(function getColumns() {
      return [
          {
              title: 'Cheque No',
              accessor: 'chequeNo',
              className: 'cell-center',
              disableFilters: true
          },
          {
              title: 'Cheque Date',
              id: 'cheque-date',
              accessor: (row) => {
                var date = new Date(row.chequeDate);
                return date_format(date);
              }
          },
          {
              title: 'Actions',
              className: 'cell-center',
              disableSortBy: true,
              Cell: ({ row }) => YourActionCell({ row, actions, deleteItem }),
              id: 'actions'
            }
        ]
    });
  // Create your grid:
  return <DataGrid
        columns={columns}
        data={data}
        csvFilename="data.csv"
        enableCreate
        createUrl="/data/create"
    />;
}

The code creates a basic data table with two columns, view, edit, delete buttons and a create button on top.

Options

You can pass in several different options to customize the table. The options are the same as React table, but I am mentioning some useful options here:

columns

The columns of your table, it takes an array of objects where each object represents a column. You can use title property to change the title of column. You can also specify the accessor property to display what is in the column.

enableCreate & createUrl

These options are responsible for the create button on the top of table. Provide enableCreate option to display the button. Upon clicking it, the user will be redirected to createUrl.

CrudTable

If you don’t want much customization and okay with your code being dynamic, you can use CrudTable. It is a wrapper around DataGrid and allows to build the same table with much less code. It supports the same level of customization as DataGrid, but DataGrid can do it in a cleaner way.

Basic CrudTable

You just need a provider to build your CrudTable. Here is all the code to build the same table as above:

import CrudTable from "sections/tables/crud-table/CrudTable";

export default function ItemsTable() {
    var actions = useMemo(function getActions() {
        return [
            {
                name: 'edit',
                onClick: {
                    navigate: '/item/edit/:id'
                },
            },
            {
                name: 'delete',
                onClick: 'deleteItem',
                confirm: 'By deleting this item, all details are lost permanetly. This action is irreversible!',
                success: 'item deleted successfully'
            }
        ];
    });

    return (
        <MainCard title="Items List" darkTitle>
            <YourDataProvider>
            <CrudTable
                context={YourContext}
                createUrl="/item/create"
                enableCreate
                actions={actions}
                actionProviderMap={{data: 'employees', loading: 'loading'}}
                />
            </YourDataProvider>
        </MainCard>
    )
}

As I am not passing the columns, it is building them from the data fetched from the context you passed in. If I had passed columns, it would work similar to DataGrid and append an action cell in the end. It also supports automatic redirection, confirmation popups, success messages and more.

Options

columns

It is similar to DataGrid, but if you don’t pass them, they will be built from your data. Be careful though, it will explode if there are no records to find columns using.

actions

Actions is an array of objects that builds the last cell with edit/update/delete buttons. Every object can have the following attributes:
name: The display name of the action.
onClick: The action to execute on the click of the button. You can pass in a function that takes an ID, an string representing the name of a function in your context or an object representing the action to perform.
Examples:
onClick: function onClick(id) {console.log(id)}
onClick: ‘deleteEmployeeById’ // Call the deleteEmployeeById function in your context.
onClick: {navigate: ‘/employee/edit/:id’} // Go to /employee/edit/<ID will be inserted here>
icon: If not provided, icon is assigned dynamically based on the name.
confirm

If provided, clicking on the button will first prompt the user to confirm before calling your function.
success

The message to display after running your code.

actionProviderMap

You can use this object to define which properties to read to get data. It currently supports two properties
data: Which property to use to read data.
For example, if you say data: employees, you are telling the table to read context.employees to get your data.
loading: Which property to use while checking for loading.

requiresLoading

If set to false, it will not check for the context to finish loading.