React Data Grid Overview

The React Grid is a powerful and flexible grid component that delivers features such as sorting, filtering, pagination, column resizing, etc. You can use it in web applications to display and manipulate tabular data in a user-friendly way. React implements its own synthetic event system, so you will have to do a bit of an additional setup when you want to try Apex Grid for React.

How To Get Started with Apex Grid for React

Add the Apex grid to you project as well as a helper package which simplifies the usage of Lit based web components in the context of React applications.

npm install apex-grid @lit-labs/react

Configuration

You can use the createComponent from the Lit wrapper package to wrap the Apex grid into a React component. Here is a bit of code that does that while also preserving the type inference of the Apex grid.

// apex-grid-factory.ts

import * as React from 'react';
import { createComponent } from '@lit-labs/react';
import type { EventName } from '@lit-labs/react';
import {
  ApexFilteringEvent,
  ApexFilteredEvent,
  ApexGrid,
  ColumnConfiguration,
  FilterExpressionTree,
  SortExpression,
} from 'apex-grid';

ApexGrid.register();

function createApexGridWrapper<T extends object>() {
  return createComponent({
    tagName: 'apex-grid',
    elementClass: ApexGrid<T>,
    react: React,
    events: {
      onSorting: 'sorting' as EventName<CustomEvent<SortExpression<T>>>,
      onSorted: 'sorted' as EventName<CustomEvent<SortExpression<T>>>,
      onFiltering: 'filtering' as EventName<CustomEvent<ApexFilteringEvent<T>>>,
      onFiltered: 'filtered' as EventName<CustomEvent<ApexFilteredEvent<T>>>,
    },
  });
}

Usage

Then use the factory function inside your React code.

// App.ts
  
import { createApexGridWrapper } from './apex-grid-factory';

type UserInfo = { id: string, name: string };

const UserInfoGrid = createApexGridWrapper<UserInfo>();

function App() {
  const data: UserInfo[] = [...];
  const columns: ColumnConfiguration<UserInfo>[] = [...];

  return (
    <div className="app">
      <UserInfoGrid data={data} columns={columns}></UserInfoGrid>
    </div>
  );
}