react-table-npm

Features

• Build easy high performance react tables
• Server and Client Side rendering
• Filter and Sort Data
• Select Rows and Copy (multi)
• Resizable columns
• Typescript support

Preview

https://react-hook-tables.vercel.app

Install

npm install react-hook-tables

Start

import Table from "react-hook-tables"

const columns = [
  {
    id: "name",
    label: "Name",
    sort: true,
    width: { minWidth: 300, defaultWidth: "1fr" }
  }
]

const data = [
  {
    id: "1",
    name: "Karl"
  }
]

const App = () => {
  const handleColumnKeyExtractor = (item) => item.id;
  const handleRenderColumn = (item) => item.label;

  const handleDataKeyExtractor = (item: Data) => {
    return `${item.name}-${item.id}`;
  };

  const handleRenderData = (item, column) => {
    return (
      <td key={`${item.name}-${column.id}`}>
        <span>{item[column.id as keyof Data]}</span>
      </td>
    );
  };

  return (
    <Table
      columns={columns}
      columnKeyExtractor={handleColumnKeyExtractor}
      renderColumnItem={handleRenderColumn}
      data={data}
      dataKeyExtractor={handleDataKeyExtractor}
      renderData={handleRenderData}
    />
  );
}

Column Props

  sort: boolean
  width: {
    minWidth: number | number
    defaultWidth: string | number
  }