/ctablex

Primary LanguageTypeScriptApache License 2.0Apache-2.0

ctablex

NPM version NPM downloads Build Status codecov

Featureable, flexible and powerful react table. ctablex will not hold you back and let you customize table UI and behavior. ctablex name is the combination of table and ctx (context).

Install

yarn add @ctablex/core

Usage

import React from 'react';
import {
  DataTable,
  Columns,
  Column,
  IndexCell,
  Table,
  TableHeader,
  HeaderRow,
  TableBody,
  Rows,
  Row,
} from '@ctablex/core';

const data = [
    id: '1',
    name: 'Gloves',
    price: 544,
    count: 5,
  },
  {
    id: '2',
    name: 'Salad',
    price: 601,
    count: 6,
  },
  {
    id: '3',
    name: 'Keyboard',
    price: 116,
    count: 1,
  },
];
export function MyTable() {
  return (
    <DataTable data={data}>
      <Columns>
        <Column header="Name" accessor="name" />
        <Column header="Price" accessor="price" />
        <Column header="Count" accessor="count" />
      </Columns>
      <Table>
        <TableHeader>
          <HeaderRow />
        </TableHeader>
        <TableBody>
          <Rows>
            <Row />
          </Rows>
        </TableBody>
      </Table>
    </DataTable>
  );
}

Changelog

Please read the changelog here.

License

This project is licensed under the terms of the Apache License 2.0.