Integrating Third-Party Libraries

Customizing MUI Components

As previously mentioned, we use the @mui/x-data-grid library for implementing tables and data grids. This powerful library allows us to create highly customizable and efficient data displays in our application.

Customizing Table Styles

The styles for tables and data grids are customized in the following files:

• frontend/src/css/_table.css
• frontend/src/styles.ts (specifically, the dataGridStyles variable)

Below is an example of how the data grid is utilized for the Users entity:

The complete source code can be found in the frontend/src/components/Users/TableUsers.tsx file under the dataGrid variable.

Depending on the user’s permissions, standard actions are available within the data grid:

Configuring the Data Grid

For instance, the configuration for the Users data grid is managed in the frontend/src/components/Users/configureUsersCols.tsx file.

Here is a snippet of the configuration code:

export const loadColumns = async (
  onDelete: Params,
  onView: Params,
  onEdit: Params,
  entityName: string,
) => {
  return [
    {
      field: 'firstName',
      headerName: 'First Name',
      flex: 1,
      minWidth: 120,
      filterable: false,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      editable: true,
    },
    {
      field: 'lastName',
      headerName: 'Last Name',
      flex: 1,
      minWidth: 120,
      filterable: false,
      headerClassName: 'datagrid--header',
      cellClassName: 'datagrid--cell',
      editable: true,
    },
    // Additional columns
  ];
};

Enabling Inline Editing

Inline editing in the data grid is enabled by adding the editable property to the column configuration:

{
  field: 'firstName',
  headerName: 'First Name',
  flex: 1,
  minWidth: 120,
  filterable: false,
  headerClassName: 'datagrid--header',
  cellClassName: 'datagrid--cell',
  editable: true,
}

Based on the column type, the appropriate editor will be activated. For example:

Additionally, you can enable or disable column sorting using the sortable property. This property is enabled by default:

{
  field: 'firstName',
  headerName: 'First Name',
  flex: 1,
  minWidth: 120,
  filterable: false,
  headerClassName: 'datagrid--header',
  cellClassName: 'datagrid--cell',
  sortable: true,
  editable: true,
}

Here is how the sorting menu looks:

For more detailed documentation on MUI DataGrid, visit MUI DataGrid Documentation.

Data Grid Actions

The data grid actions, described earlier, are also configured in the frontend/src/components/Users/configureUsersCols.tsx file within the loadColumns function:

...
{
  field: 'actions',
  type: 'actions',
  minWidth: 30,
  headerClassName: 'datagrid--header',
  cellClassName: 'datagrid--cell',
  getActions: (params: GridRowParams) => {
    const actions = [
      <GridActionsCellItem
        key={1}
        icon={<BaseIcon path={mdiEye} size={24} />}
        onClick={() => onView(params?.row?.id)}
        label='View'
        showInMenu
      />,
      <GridActionsCellItem
        key={2}
        icon={<BaseIcon path={mdiPencilOutline} size={24} />}
        onClick={() => onEdit(params?.row?.id)}
        label='Edit'
        showInMenu
      />,
      <GridActionsCellItem
        key={3}
        icon={<BaseIcon path={mdiTrashCan} size={24} />}
        onClick={() => onDelete(params?.row?.id)}
        label='Delete'
        showInMenu
      />,
    ];

    return actions;
  },
}
...

The data grid also includes row selection by default, allowing users to select multiple rows and perform batch deletions:

After selecting at least one row, a "Delete Rows" button appears in the upper right corner of the menu.

Additional Functions

Other functions include “New Item,” “Filter,” “Download CSV,” and “Upload CSV.”

The logic for these functions for the Users table is located in frontend/src/pages/users/users-table.tsx.

For example, to filter the data grid, click the “Filter” button:

Select the desired field from the list and specify the criterion in “Contains.”

To add another filter, click the “Filter” button again. To reset the filter, click the “Cancel” button.

You can also download the result in CSV format by clicking the “Download CSV” button.

The source code for the “Download CSV” button handler is in frontend/src/pages/users/users-table.tsx:

const getUsersCSV = async () => {
  const response = await axios({
    url: '/users?filetype=csv',
    method: 'GET',
    responseType: 'blob',
  });
  const type = response.headers['content-type'];
  const blob = new Blob([response.data], { type: type });
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = 'usersCSV.csv';
  link.click();
};

Using Third-Party Libraries

Here is a list of third-party libraries used in various widgets:

• chart.js, react-chartjs-2, apexcharts: For creating charts and graphs in smart widgets (frontend/src/components/SmartWidget)
• react-toastify: Used throughout the application for displaying notifications
• react-datepicker: Used throughout the application for date selection
• @mui/x-data-grid: Used for implementing data grids and tables
• formik: Helps in form implementation

The SelectField and SelectFieldMany widgets use react-select.

The BigCalendar widget uses react-big-calendar .

The SwitchField widget uses react-switch.