Octave Grid React

#Installation

1. 01

   Install the package

   Install @octave/grid-react; react and react-dom are peer dependencies.

   pnpm add @octave/grid-react

2. 02

   Render a grid

   Define columns, give it a data source, and render OctaveGrid.

   import {
     OctaveGrid,
     createGridColumn,
     createLocalDataSource,
     createDefaultView,
   } from "@octave/grid-react";
   
   const columns = [
     createGridColumn<Member>({ id: "name", header: "Name", accessorKey: "name", editable: true }),
     createGridColumn<Member>({ id: "seats", header: "Seats", accessorKey: "seats", type: "number" }),
   ];
   
   const dataSource = createLocalDataSource({ rows, getRowId: (row) => row.id });
   
   export function MembersGrid() {
     return (
       <OctaveGrid<Member>
         columns={columns}
         dataSource={dataSource}
         rowId={(row) => row.id}
         defaultView={createDefaultView(columns)}
         selectionMode="multiple"
       />
     );
   }

#Features

• Virtualized rows and columns with sticky headers and pinned columns.
• Inline editing with typed editors, a formula bar, and optional spreadsheet formulas.
• Fill handle, frozen rows, an aggregation footer, and conditional formatting.
• Saved views for widths, order, density, filters, and sorts.
• Workbook tabs, and import from CSV, TSV, JSON, XLSX, and XLS.
• Light, dark, and system themes; local and remote data sources.