Column Menu Example

Here is an example of how to use the column menu in the BeastGrid component.

In this example we have configured a shared column definition with defaultColumnDef that configures menu to show column and grid menu.

For the namecolumn we have configured the menu with true value, so this column will show all menu options (column, filter and grid).

The amount and orders columns have a menu without filter option.

import 'beast-grid/style.css'
 
import numeral from 'numeral';
import { BeastGrid, BeastGridConfig, ColumnDef } from 'beast-grid';
import { User, data } from './data';
 
export default function Grid() {
 
  const columnDefs: ColumnDef[] = [
    { headerName: 'ID', field: 'userId', sortable: false },
    { headerName: 'NAME', field: 'username', sortable: false, menu: { filter: true } },
    {
      headerName: 'AMOUNT',
      field: 'money',
      flex: 1,
      menu: { column: true, grid: true },
      formatter: (value) => numeral(value).format('0,0 $'),
    },
    {
      headerName: 'ORDERS',
      field: 'orders',
      flex: 1,
      menu: { column: true, grid: true },
      formatter: (value) => numeral(value).format('0,0'),
    },
  ];
  const config: BeastGridConfig<User[]> = {
    data,
    columnDefs,
    style: {
      border: true
    },
    sort: {
      enabled: true,
    },
    defaultColumnDef: {
      menu: { column: true, grid: true }
    }
  };
 
  return (
    <div style={{ height: 400, width: '100%' }}>
      <BeastGrid config={config} />
    </div>
  );
}

Sorting Grouping