@ctablex/core

Flexible and powerful react table

Showing:

Popularity

Downloads/wk

76

GitHub Stars

15

Maintenance

Last Commit

3mos ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

1.6KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

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,
  Table,
} 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 />
    </DataTable>
  );
}

live demo, source code

The Table component

The Table/TableHeader/HeaderRow/TableBody/Rows/Row components have default children. so when you write <Table />, it's equal to you write the following codes:

<Table>
  <TableHeader>
    <HeaderRow>
      <Columns />
    </HeaderRow>
  </TableHeader>
  <TableBody>
    <Rows>
      <Row>
        <Columns />
      </Row>
    </Rows>
  </TableBody>
</Table>

The Columns component

You can assume <Columns /> component somehow renders Columns' children defined in the first part (definition part).

<DataTable data={data}>
  <Columns>
    {/* begin children definition */}
    <Column header="Name" accessor="name" />
    <Column header="Price" accessor="price" />
    <Column header="Count" accessor="count" />
    {/* end children definition */}
  </Columns>
  <TableBody>
    <Rows>
      <Row>
        <Columns />
      </Row>
    </Rows>
  </TableBody>
</DataTable>

is equal to

<DataTable data={data}>
  <TableBody>
    <Rows>
      <Row>
        <Column header="Name" accessor="name" />
        <Column header="Price" accessor="price" />
        <Column header="Count" accessor="count" />
      </Row>
    </Rows>
  </TableBody>
</DataTable>

Changelog

Please read the changelog here.

License

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial