react-notion-table v0.1.1

React Notion Table

React Notion Table is a modern and flexible editable table library for React with TypeScript support.

!NOTE Implementation of editable tables with a rich user interface and intuitive features inspired by Notion.

Installation

npm install react-notion-table
# or
yarn add react-notion-table

Key Features

• ✅ Resizable columns
• ✅ Cell data types: text, number, select
• ✅ Rename column headers
• ✅ Sort individual columns
• ✅ Add columns to the left or right
• ✅ Add a new column to the end
• ✅ Edit data in cells
• ✅ Add a new row of data
• ✅ Delete a column
• ✅ Change column data types
• ✅ Add options for select-type cells
• ✅ Support for virtualized rows
• ✅ Full TypeScript support

Quick Start

import { NotionTable } from 'react-notion-table';
import 'react-notion-table/dist/style.css'; // optional, if you want to use basic styles

// Example data and columns
const columns = [
  {
    id: 'name',
    label: 'Name',
    accessor: 'name',
    dataType: 'text',
  },
  {
    id: 'age',
    label: 'Age',
    accessor: 'age',
    dataType: 'number',
  },
  {
    id: 'status',
    label: 'Status',
    accessor: 'status',
    dataType: 'select',
    options: ['Active', 'Blocked', 'Pending'],
  },
];

const data = [
  { id: '1', name: 'Ivan', age: 25, status: 'Active' },
  { id: '2', name: 'Maria', age: 30, status: 'Pending' },
];

function App() {
  const [tableData, setTableData] = useState(data);
  const [tableColumns, setTableColumns] = useState(columns);

  return (
    <NotionTable
      columns={tableColumns}
      data={tableData}
      onDataChange={setTableData}
      onColumnsChange={setTableColumns}
      virtualized={true}
      height={500}
    />
  );
}

API

TableProps

Column

Row

interface Row {
  id: string;
  [key: string]: any;
}

Roadmap

• Support for virtualized rows
• Full TypeScript typing
• Date data type
• Multi-select data type
• Checkbox data type
• Animated dropdowns
• Performance - support for 100,000+ rows

Contributing

Contributions are welcome! Feel free to pick an item from the roadmap or open a new issue!

1. Fork the repository
2. Create a branch for your feature (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Added an amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.md for more information.