Quick Start

Install the package

npm i beast-grid

Import the styles

You can use the default theme or create your own.

import 'beast-grid/style.css';

/* Custom theme */`
 
--bg-color--1: #f5f5f5;
--bg-color--2: #ffffff;
--bg-color--3: #f5f5f5;
...

Size Matters

To use Beast grid you can configure a container with a width and height to be rendered, or just use the style prop to define the size of the grid.

#container {
  width: 100%;
  height: 400px
}

<div id="container">
...
</div>

Configure the Beast!

To start let's configure the basic options!

You can dig into the API to see all the options available.

// Import the Beast!
import BeastGrid, { BeastGridConfig } from 'beast-grid';
 
export default function Grid({ count, theme, config: _customConfig }: Props) {
  // Get the data
  const data = TableData(count);
 
  // Define the columns
  const columnDefs: ColumnDef[] = [
    { headerName: 'ID', field: 'userId' },
    { headerName: 'NAME', field: 'username' },
    { headerName: 'MAIL', field: 'email', width: 300 },
    {
      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'),
    },
  ];
 
  // Customize your grid
  const config: BeastGridConfig<User[]> = {
    data,
    columnDefs,
    style: {
      border: true
    },
    sort: {
      enabled: true,
      multiple: true
    },
    theme,
    ..._customConfig,
  };
 
  return (
      <BeastGrid config={config} />
  );
}

Introduction Theming