React Grid with Dynamic Dropdown and Selection

A React grid code example with dynamic dropdown and selection.

React Dynamic Grid

Overview

In this article let’s go back to the basics of Javascript and React programming. I am going to develop a React application that does the followings,

• Use faker.js to generate faker data.
• Display the data in a grid using AG Grid.
• Create dropdowns with cascading select for countries, sub countries, and cities. E.g., when I select the United Kingdom, then sub country dropdown should only show England, Northern Ireland, Scotland, and Wales.
• Only display the check box for modified rows.

Generate Fake Data

For application development or testing, you always need data for testing. Libraries like Faker.js for Javascript and Faker for Python come in handy for this need.

Using Faker.js, I can easily generate persons’ details as shown in the below code snippet.

import faker from "faker";
useEffect(() => {
  async function loadData() {
   const persons = [];
   for (var i = 0; i < 1000; i++) {
    var person = {};
    person.name = faker.name.findName();
    person.email = faker.internet.email();
    person.country = "";
    person.subcountry = "";
    person.city = "";
    persons.push(person);
   }
   setData(persons);
  }
  loadData();
}, []);

Generated Persons’ Details

AG Grid

Using AG Grid, I can then display the data easily.

<div className="ag-theme-alpine" style={{
    height: 600, marginLeft: 20, marginRight: 20, marginTop: 10
   }}>
    <AgGridReact
     onGridReady={onGridReady}
     rowData={data}
     columnDefs={columnDefs}
     suppressRowClickSelection={true}
     pagination={true}
     paginationPageSize={10}
     enableRangeSelection={true}
     paginationNumberFormatter={
      function(params) { return '[' + params.value.toLocaleString() + ']'; }}
     rowSelection={'multiple'}
     sizeColumnsToFit={true}
     enableCellTextSelection={true}…