MonkeyTab

Getting started

Get a working <MonkeyTable> in your React app in under five minutes.

Install

npm install @datasketch/monkeytab

React 18 or 19 is required as a peer dependency.

Your first table

import { MonkeyTable } from '@datasketch/monkeytab';

function App() {
  return (
    <MonkeyTable
      columns={[
        { id: 'Name' },
        { id: 'Age', type: 'Number' },
        { id: 'Active', type: 'Boolean' },
      ]}
      rows={[
        { Name: 'Alice', Age: 30, Active: true },
        { Name: 'Bob', Age: 25, Active: false },
      ]}
      onChange={(rows) => console.log('Updated:', rows)}
      height="auto"
    />
  );
}

That's it. You now have an editable table with:

  • Click-to-select cells
  • Double-click to edit
  • Tab and arrow key navigation
  • Sort by clicking column headers
  • Search and filter via the toolbar
  • Add and remove rows
  • A working data model with onChange for persistence

Next steps