Sorting Example

Here is a sorting example configuration for the BeastGrid component.

In this example, we have a list of users with their ID, name, amount, and orders. We want to sort the data based on the amount and orders.

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 },
    {
      headerName: 'AMOUNT',
      field: 'money',
      flex: 1,
      formatter: (value) => numeral(value).format('0,0 $'),
    },
    {
      headerName: 'ORDERS',
      field: 'orders',
      flex: 1,
      formatter: (value) => numeral(value).format('0,0'),
    },
  ];
  const config: BeastGridConfig<User[]> = {
    data,
    columnDefs,
    border: true,
    sort: {
      enabled: true,
      multiple: true,
    },
  };
 
  return (
    <div style={{ height: 400, width: '100%' }}>
      <BeastGrid config={config} />
    </div>
  );
}

Basic Column menu