ctablex

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
• Usage
  • The Table component
  • The Columns component
• Changelog
• License

Install

yarn add @ctablex/core

Usage

importReactfrom'react';import{DataTable,Columns,Column,Table,}from'@ctablex/core';constdata=[id: '1',name: 'Gloves',price: 544,count: 5,},{id: '2',name: 'Salad',price: 601,count: 6,},{id: '3',name: 'Keyboard',price: 116,count: 1,},];exportfunctionMyTable(){return(<DataTabledata={data}><Columns><Columnheader="Name"accessor="name"/><Columnheader="Price"accessor="price"/><Columnheader="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).

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

is equal to

<DataTabledata={data}><TableBody><Rows><Row><Columnheader="Name"accessor="name"/><Columnheader="Price"accessor="price"/><Columnheader="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.