NinTable

A high-performance, feature-rich React data grid component.

Features

• 🚀 High Performance (Virtualization)
• 🎨 Customizable Theme (CSS Variables/SCSS)
• 🔢 Sorting, Filtering, and Grouping
• 🖊️ Inline Editing
• 🖱️ Cell Selection
• 🧊 Column Freezing & Resizing

Installation

npm install nin-table

Usage

import React, { useMemo } from 'react';
import { Table, ColumnDef } from 'nin-table';
import 'nin-table/dist/nin-table.css';

interface User {
  id: number;
  name: string;
  role: string;
}

const App = () => {
  const data = useMemo(() => [
    { id: 1, name: 'John Doe', role: 'Developer' },
    { id: 2, name: 'Jane Smith', role: 'Designer' },
  ], []);

  const columns: ColumnDef<User>[] = useMemo(() => [
    { key: 'id', header: 'ID', width: 50 },
    { key: 'name', header: 'Name', width: 150 },
    { key: 'role', header: 'Role', width: 150 },
  ], []);

  return (
    <div style={{ height: 400 }}>
      <Table
        dataSource={data}
        columns={columns}
        rowKey="id"
      />
    </div>
  );
};

Documentation

For full API documentation, see API.md

The API documentation includes:

• Complete property reference for Table, Column, Row operations
• Cell selection and keyboard navigation
• Pagination and virtualization options
• Plugin system and custom plugin creation
• Theming and styling guide
• TypeScript definitions and type safety
• Advanced usage examples

License

MIT