Acrool React Table

CSS Gird Of React Table Design

Documentation

• Getting Started
• Faq
• Components
• Features

Features

• Use React + CSS Grid
• Easier to use, help memory
• Separate theme styles, making it easier to customize styles
• Provide Cell Display Mode
• Support Sticky
• Support Header Sort
• Support Paginate and can be used independently
• Support Detail
• Support Footer
• Support NextJS 14 (v5.0.3+)

Installation

yarn add @acrool/react-table

Usage

add in your main.tsx

import '@acrool/react-table/dist/index.css';
import '@acrool/react-table/dist/theme/acrool.css'; // (Options theme) 

Option theme

add in your main.tsx, after dist/index.css

• Acrool: @acrool/react-table/dist/theme/acrool.css
• Game: @acrool/react-table/dist/theme/game.css

then in your page

import Table from '@acrool/react-table';


const Example = () => {
    return <Table
        title={{
            name:   {text: 'Title', col: 100},
            desc:   {text: 'Text', col: true},
        }}
        data={[
            {id: 1, field: {name: 'Image Chiu', desc: 'this is a frontend coder'}},
            {id: 2, field: {name: 'Gary Chien', desc: 'this is a backend coder'}},
        ]}
    />;
};

Options

if need use null value, options type

{
    "compilerOptions": {
        "strictNullChecks": false
    }
}

There is also a storybook that you can play with it:

License

MIT © Acrool & Imagine