Grid Factory - Create many grids slightly different

Using a Factory Method to create custom grids with optional differences

The following examples show the use of a Factory Method to create the GridOptions object. The method can be passed some parameters for configuring the options it will return.

The idea here is that you can store a static configuration of the grid to be implemented in all options created by the factory, to avoid having to set those configurations every time you want a new grid.

However, this doesn't leave you with a static grid, as you can still choose which parameters are customizable by passing them into the factory method. The two grids in this example will have the same columnDefs, but are being assigned different rowData and different boolean values for sorting/filtering enabled.

Grids with different row and column data

Below we display how you can use a Grid Factory to create grids with different row and column data, with optional filtering and sorting

You can find a working example of this here.

How it works?

We have all of our logic behind the Create Grid button, inside there is where we create a new div (to house our grid), check which data set has been picked and if the filter option and/or the sorting option has been checked.

const newGridProvider = () => {

// ... logic to create a new div

let option = document.querySelector('select');
let rowData = option.value === 'dataOne' ? deepCopy(dummyData) : deepCopy(dummyData2);

  new agGrid.Grid(
    newDiv,
    gridOptionsFactory(
      rowData,
      sortCheckBox.checked,
      filterCheckBox.checked,
      option.value
    )
  );
  parentDiv.insertBefore(newDiv, gridDiv);
};

Our createGridOptions() takes four arguments which determine what data should be displayed and what additional features to show 

const createGridOptions = (data, typeOfData) => ({
  columnDefs: typeOfData,
  rowData: data,
});

// ... operation executed in newGridProvider() ....

let typeOfData = option.value === 'dataOne'
      ? athleteColumnsFactory(sortCheckBox.checked, filterCheckBox.checked)
      : carsColumnsFactory(sortCheckBox.checked, filterCheckBox.checked);

// ...

typeOfData is set by a ternary operation using two more factories, athletesColumnsFactory() and carsColumnFactory() this is where we set the relevant columnDef and see if the user chose filtering and/or sorting.

const TEXT_FILTER_NAME = 'agTextColumnFilter';
const NUMBER_FILTER_NAME = 'agNumberColumnFilter';

let athleteColumnsFactory = (shouldSort, shouldFilter) => [
  {
    field: 'athlete',
    minWidth: 150,
    sortable: shouldSort,
    filter: shouldFilter ? TEXT_FILTER_NAME : false,
  },
  {
    field: 'age',
    maxWidth: 90,
    sortable: shouldSort,
    filter: shouldFilter ? NUMBER_FILTER_NAME : false,
  },

  // ... athleteColumnsFactory data
];

let carsColumnsFactory = (shouldSort, shouldFilter) => [
  {
    field: 'car',
    minWidth: 150,
    sortable: shouldSort,
    filter: shouldFilter ? TEXT_FILTER_NAME : false,
  },
  {
    field: 'make',
    maxWidth: 90,
    sortable: shouldSort,
    filter: shouldFilter ? NUMBER_FILTER_NAME : false,
  },
// ... carsColumnsFactory data
];

Older examples:

https://plnkr.co/edit/PuhIvLcRVfJ4vBLS9c9C?p=preview

https://next.plnkr.co/edit/u8H571iOUufiaESz?preview

React: https://next.plnkr.co/edit/oeQNCpSSvWzGjc1j