Lightgrid Documentation

website·Indexed 30 days ago

A high-performance datagrid for React featuring row and column virtualization, pinning, resizing, reordering, and spanning. Supports advanced data handling including async data, pagination, row grouping, and custom cell editing via renderers.

Tokens: 3.9K
Snippets: 19
Records: 31
Agent score: 47%

What's inside Lightgrid

Implement cell editing using custom cell renderers
Cell editing in LightGrid is achieved by creating a custom cell renderer component. The recommended pattern for an editable cell involves a state-driven toggle between a read-only view and an edit view. The typical workflow is:
1. Read-only Mode: The cell renders the current value.
2. Trigger: The component listens for a double-click event to switch to edit mode.
3. Edit Mode: The cell renders an input field. The editing state is kept internal to the cell component as the user types.
4. Commit/Cancel:
  Pressing Enter triggers an onCommit callback to update the underlying data.
  Pressing Escape cancels the changes.
5. Reset: After commit or cancel, the cell returns to read-only mode.
https://lightgrid.io/cells/editing/
Implement expandable detail rows in LightGrid
To implement detail rows that can be expanded and collapsed in LightGrid, you must configure four specific elements:
1. Expansion Column: Add a column to the columns definition that serves as the trigger for expanding the row.
2. Row Metadata: Use the getRowMeta property to inform the grid whether a specific row possesses a child details row.
3. Details Renderer: Use the renderRowDetails property to define the custom content/component to be rendered within the expanded detail area.
4. State Management: Provide rowState and setRowState to the grid. This allows the grid to track the expanded state of rows and enables the expansion column to toggle that state.
https://lightgrid.io/rows/detail-rows/
Implement global search and filtering in LightGrid
In LightGrid, global search and filtering are controlled by the developer via props. To implement a search feature, create a custom input component and use it to filter the data prop passed to the grid.
https://lightgrid.io/global-search/

Handle grouping and data rows in DataGrid columns

When using row grouping, columns must distinguish between a grouping row and a standard data item using the isRowGroup(item) utility.

For grouping columns: Only render content if isRowGroup(item) is true.
For data columns: Only render content or return values if isRowGroup(item) is false.

const columns = [
  {
    key: 'group',
    header: 'Group',
    getValue: d => d.id,
    cellComponent: ({ item }) => {
      if (isRowGroup(item)) {
        return <div>Special grouping cell</div>;
      }
    }
  },
  {
    key: 'athlete_name',
    header: 'Athlete',
    // Only return value if it is NOT a grouping row
    getValue: d => !isRowGroup(d) && d.athlete_name
  }
];

Handle asynchronous data fetching in LightGrid
To display data from an external source (such as an API) in LightGrid, fetch the data using your preferred method and then update the data prop of the component with the retrieved results.
https://lightgrid.io/async-data/
Manage column sort state with onColumnsChange
Because sorting modifies the state of the columns, you must implement the onColumnsChange prop on the Grid component to capture and update the column state in your application. Failure to implement this will prevent sort state changes from persisting.
https://lightgrid.io/rows/sorting/

Programmatically scroll to a cell, row, or column in DataGrid

To programmatically control scrolling in a DataGrid, use a reference to the GridApi. The scrollTo method allows for vertical scrolling (by providing a rowKey), horizontal scrolling (by providing a columnKey), or both to target a specific cell.

import { useRef } from 'react';
import { DataGrid, GridApi } from '@lightgrid/react'; // Adjust import based on actual package

const MyComponent = () => {
  const gridApi = useRef<GridApi>();

  return (
    <>
      <DataGrid
        gridApi={gridApi}
        // ... other props
      />
      
      {/* Example triggers */}
      <button onClick={() => gridApi.current?.scrollTo({ rowKey: 'row123' })}>
        Scroll to Row
      </button>
      <button onClick={() => gridApi.current?.scrollTo({ columnKey: 'col456' })}>
        Scroll to Column
      </button>
      <button onClick={() => gridApi.current?.scrollTo({ rowKey: 'row123', columnKey: 'col456' })}>
        Scroll to Cell
      </button>
    </>
  );
};

Group data for a Lightgrid DataGrid

Use the groupData utility method to transform a flat data array into a grouped structure. The function takes the data, an array of grouping keys (strings for simple getters or objects for custom normalization), the current rowState to track expansion, and an optional number specifying how many levels to expand by default.

// Example using simple string keys
const groupedData = groupData<Medalist>(
  data,
  ['country', 'medal_type', 'athlete_sex'],
  rowState,
  2 // optional: expand 2 levels by default
);

// Example using an object for nested data or normalization
const groupedDataCustom = groupData(
  data,
  [
    {
      key: 'country',
      getValue: item => item.country.toLowerCase()
    }
  ],
  rowState
);

Implement Infinite Pagination in LightGrid
Use infinite pagination (lazy loading) when the total data count is unknown. This pattern typically relies on server-side offset or cursor-based pagination to fetch subsequent batches of items until the server indicates that no more data is available.
https://lightgrid.io/pagination/
Install LightGrid for React
Install the @lightgrid/react package using your preferred package manager.
```
npm install @lightgrid/react
# or
yarn add @lightgrid/react
# or
pnpm add @lightgrid/react
```
https://lightgrid.io/

Implement grouped columns in LightGrid

To create grouped columns, use a nested array structure where a parent column object contains a children array of column definitions. This allows multiple sub-columns to be categorized under a single header.

import { GroupedColumns } from '@lightgrid/react'

interface CryptoCurrency {
  priceChange1h: number;
  priceChange24h: number;
  // ... other fields
}

const columns: GroupedColumns<CryptoCurrency> = [
  {
    key: 'priceChangeGroup',
    header: 'Price change',
    children: [
      {
        key: 'priceChange1h',
        header: '% 1h',
        getValue: (d) => d.priceChange1h,
      },
      {
        key: 'priceChange24h',
        header: '% 24h',
        getValue: (d) => d.priceChange24h,
      },
    ],
  },
];

Implement Finite Pagination in LightGrid
Use finite pagination when the total length of the dataset is known. This allows the implementation of standard navigation controls such as 'First', 'Last', 'Back', and 'Forward' to navigate through a fixed number of pages.
https://lightgrid.io/pagination/