Features

• Build easy high performance react tables
• Server and Client Side rendering
• Filter and Sort Data
• Select Rows and Copy (multi)
• Create Dynamic Charts from Table Data
• Resizable columns
• Typescript support
• Storybook Support

Storybook

https://react-ava-table.vercel.app

Install

npm install react-table-npm

Examples

• Client Side: https://codesandbox.io/s/react-table-npm-example-client-side-wunuk4?file=/src/App.tsx
• Server Side: https://codesandbox.io/s/react-table-npm-example-server-side-qojv3d?file=/src/App.tsx

Start

import { Table } from "react-table-npm"

type Width = {
  minWidth?: number;
  defaultWidth?: string | number;
};

type Column = {
  id: string;
  label: string;
  filter?: string;
  sort?: boolean;
  width?: Width;
};

type Data = {
  id: string;
  name: string;
  age: number;
  state: string;
};

const columns: Column[] = [
  {
    id: "name",
    label: "Name",
    sort: true,
    width: { minWidth: 300, defaultWidth: "1fr" },
  },
  {
    id: "age",
    label: "Age",
    sort: true,
    filter: true,
    width: { defaultWidth: 200 },
  },
  {
    id: "state",
    label: "State",
    sort: true,
    width: { minWidth: 300, defaultWidth: 400 },
  },
];

const users = [
  {
    "id": "62e2dd905e37187e20fd4a13",
    "name": "Mcintyre Forbes",
    "age": 69,
    "state": "Idaho"
  },
  {
    "id": "62e2dd90c7d21f4a03638d4f",
    "name": "Verna Berger",
    "age": 18,
    "state": "Louisiana"
  },
  {
    "id": "62e2dd90edc01768932b2da7",
    "name": "Gladys Dawson",
    "age": 100,
    "state": "Federated States Of Micronesia"
  }
]
const data: Data[] = users;

function App() {
  return (
    <Table
      columns={columns}
      data={data}
      selectable={true}
      contextMenu={true}
    />
  );
}

Table Callback Functions

| name | props | return | description | | --------------------- | ----------------------------------------------------------------------- | ------------------ | -------------------------------- | | columnKeyExtractor | (item: Column) | string (unique id) | creates a key for each column | | renderColumnItem | (item: Column) | string | return name of the column | | dataKeyExtractor | (item: Data) | string (unique id) | creates a key for each dataset | | renderData | (item: Data, column: Column) | React Component | determine value for each dataset | | fetchDataOnPagination | async (page: number, limit: number, sort: SortType, filter: FilterType) | DataType[] | calls for new data |

Table Props

| name | type | description | default | | ------------ | ------- | ----------------------------------------------------------------- | ------- | | limit | number | determinse the row count of a page | 15 | | resizable | boolean | able to resize columns width | true | | contextMenu | boolean | able to open a context menu for each row (enable copy and charts) | false | | selectable | boolean | able to select single or multiple rows | false | | isServerSide | boolean | need to set to true if you need server side | false |

Extend Example With Server Side

const handleFetchDataOnPagination = async (
  page: number,
  limit: number,
  filter: any
) => {

  // TODO - add columns, data from first example

  return new Promise((resolve) =>
    setTimeout(
      () =>
        resolve({
          data: [...users]
            .sort((a: any, b: any) => {
              if (filter?.sort?.sortBy?.value === "asc") {
                return a[filter?.sort?.sortBy?.id] > b[filter?.sort?.sortBy?.id]
                  ? 1
                  : -1;
              }
              if (filter?.sort?.sortBy?.value === "desc") {
                return a[filter?.sort?.sortBy?.id] < b[filter?.sort?.sortBy?.id]
                  ? 1
                  : -1;
              }
              return 0;
            })
            .slice((page - 1) * limit, page * limit),
          hasNextPage: users.length > page * limit,
        }),
      1000
    )
  );
};

<Table
  columns={columns}
  data={data}
  selectable={true}
  contextMenu={true}
  isServerSide={true}
  fetchDataOnPagination={handleFetchDataOnPagination}
/>

Custom Callback Functions Example

const App = () => {

  // TODO - add columns, data from first example

  // DEFAULT CALLBACKS
  const handleColumnKeyExtractor = (column: Column) => column.id;
  const handleRenderColumn = (column: Column) => column.label;

  const handleDataKeyExtractor = (item: Data) => item.id;
  const handleRenderData = (item: Data, column: 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}
      selectable={true}
      contextMenu={true}
    />
  );
}