@acrool/react-table NPM

Acrool React Table

Documentation

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'}},
        ]}
    />;
};