Grid Component

Grid component uses syncfusion's Grid to render a grid.

Props

Property	Type	Description
pageSize	number	Specifies the number of rows to be displayed on each page of the grid.
dataSource	any	Specifies the data source for the grid.
className	string	Specifies the CSS class name to be applied to the grid element.
columnName	string	Specifies the name of the column to be used for filtering or searching.
allowPaging	boolean	Specifies whether or not to enable paging in the grid.
columns	any[]	Specifies an array of column definitions for the grid.
allowGenericSearch	boolean	Specifies whether or not to enable a generic search bar in the grid toolbar.
allowColumnSearch	boolean	Specifies whether or not to enable column-specific filtering in the grid.
allowExcelExport	boolean	Specifies whether or not to enable an Excel export button in the grid toolbar.
excelFileName	string	Specifies the custom file name for the downloaded Excel file ⚠ This is a filename, so try to keep the file naming standards
allowCheckBox	boolean	enables global checkbox in grid
selectedRows	any	callback for selected rows
onRefresh	function	Refresh the grid
selectionDisable	any []	sets rows disabled in checkbox select all

Usage

Here's an example of how to use the Grid component:

Functional Component

App.tsx

import { useState } from 'react';
import './App.css';
import { Grid } from 'building-blocks';
import data from './data/data.json'; // JSON file for fetching the data
 
function App() {
  // State to store DataSource
  const [dataSource, setDataSource] = useState(data);
  const [rowsFunction, setRowsFunction] = useState<any>(() => {});
 
  // function for triggering callback
  const getRows = () => {
    const selectedRowsData = rowsFunction(); // Invoke the callback to get selected row data
    console.log("Selected Rows Data:", selectedRowsData);
  };
 
  const handleOnchange = (event: any, props: any) => {
    const newData = [...dataSource];
    const itemIndex = newData.findIndex(
      (item) => item.OrderID === props.OrderID
    );
    newData[itemIndex].Freight = event.target.value;
    setDataSource(newData);
  };
 
  // Custom Grid Component
  const gridTemplate = (props: any) => {
    const val = props.Freight;
    return (
      <div>
        <input
          defaultValue={val}
          onBlur={(event) => handleOnchange(event, props)}
        />
      </div>
    );
  };
 
  // Grid
  const columns = [
    { field: 'OrderID', width: '200', textAlign: 'Right', isPrimaryKey = true },
    { field: 'CustomerID', width: '100' },
    { field: 'EmployeeID', width: '100', textAlign: 'Right' },
    {
      field: 'Freight',
      headerText: 'Frieght',
      width: '200',
      template: gridTemplate,
    },
    { field: 'ShipCountry', width: '200', clipMode='EllipsisWithTooltip' }, // clipMode enables tooltip for lengthy texts.
    { field: 'ShipAddress', width: '150' },
  ];
 
  return (
    <div className="App">
      <div>
        <form onSubmit={handleSubmit}>
          <div className="container">
            <div className="row">
              <div className="column">
                <Grid
                  pageSize={6} // Page Size for Grid
                  dataSource={dataSource}
                  allowPaging={true}
                  columns={columns}
                  allowExcelExport={true} // This will enable an excel export option
                  id={'grid'} // make sure to add id as 'grid'
                  allowGenericSearch={true} // This will enable a generic serach
                  allowColumnSearch={true} // column wise searching
                  excelFileName={'My_Custom_Excel'} // ⚠ This is a filename, so try to keep the file naming standards
                  allowCheckBox={true} // for showing a global checkbox to all rows
                  selectedRows={(rows: any) => {setRowsFunction(() => rows)}} // callback for selected rows
                />
              </div>
              <button onClick={getRows}>GET ROWS</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}
 
export default App;

Class Component

App.tsx

import { Grid } from 'building-blocks';
import './App.css';
import React from 'react';
import data from './data/data.json'; // JSON file for fetching the data
 
class App extends React.Component {
  selectedRows: any;
  constructor(props) {
    super(props);
    this.state = {
      dataSource: data,
    };
  }
 
  // function for triggering callback
  const getRows = () => {
    console.log("Selected Rows Data:", this.selectedRows());
  };
 
  handleOnchange = (event, props) => {
    const newData = [...this.state.dataSource];
    const itemIndex = newData.findIndex(
      (item) => item.OrderID === props.OrderID
    );
    newData[itemIndex].Freight = event.target.value;
    this.setState({ dataSource: newData });
  };
 
  // Custom Grid Component
  gridTemplate = (props) => {
    const val = props.Freight;
    return (
      <div>
        <input
          defaultValue={val}
          onBlur={(event) => this.handleOnchange(event, props)}
        />
      </div>
    );
  };
 
  // Grid
  columns = [
    { field: 'OrderID', width: '200', textAlign: 'Right', isPrimaryKey = true },
    { field: 'CustomerID', width: '100' },
    { field: 'EmployeeID', width: '100', textAlign: 'Right' },
    {
      field: 'Freight',
      headerText: 'Frieght',
      width: '200',
      template: this.gridTemplate,
    },
    { field: 'ShipCountry', width: '200' },
    { field: 'ShipAddress', width: '150' },
  ];
 
  render() {
    return (
      <div className="App">
        <div>
          <form onSubmit={this.handleSubmit}>
            <div className="container">
              <div className="row">
                <div className="column">
                  <Grid
                    pageSize={6} // Page Size for Grid
                    dataSource={this.state.dataSource}
                    allowPaging={true}
                    columns={this.columns}
                    allowExcelExport={true} // This will enable an excel export option
                    id={'grid'} // make sure to add id as 'grid'
                    allowGenericSearch={true} // This will enable a generic serach
                    allowColumnSearch={true} // column wise searching
                    excelFileName={'My_Custom_Excel'} // ⚠ This is a filename, so try to keep the file naming standards
                    allowCheckBox={true} // for showing a global checkbox to all rows
                    selectedRows={(rows: any) => { this.selectedRows = rows }} // callback for selected rows
                  />
                </div>
              </div>
              <button onClick={getRows}>GET ROWS</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}
 
export default App;

How to guides

How to Refresh the grid?

Sometimes the grid need to refresh to take place the new changes. For this we can use the onRefresh prop to force refresh the grid. Here is how you can do it.

// Add a state to hold the call back
const [refreshFunction, setRefreshFunction] = useState<any>(() => {});
 
//Add a function to execute the callback from the grid
const handleRefresh = () => {
  refreshFunction();
};
 
// Add the onRefresh prop to the grid
<Grid
  dataSource={dataSource}
  columns={columns}
  id={"grid"}
  onRefresh={(refresh: any) => {setRefreshFunction(() => refresh);}}  // Add this
/>

How to Add disabled checkbox in select all?

In order to disable certain rows in a grid, an array of objects should be passed as a prop. Each object in the array should contain the column name and the id of the row that you wish to disable.

<Grid
  dataSource={data}
  id={"grid"}
  allowCheckBox={true}
  columns={columns}
  selectionDisable={[
        { colName: "OrderID", colId: 10254 },
        { colName: "OrderID", colId: 10251 },
        { colName: "OrderID", colId: 10257 },
      ]}
/>

💡 NB: The following note is only applicable for React Functional Components

In React functional components the asynchronous behavior of the useState hook may cause some anomalies which are normal for the performance improvement of react app. While having custom templates in grid component react may arise such issues. Fixes for such issues can be found Here.

Dropdown Tree Modal