https://github.com/acrool/acrool-react-table

CSS Gird Of React Table Design
https://github.com/acrool/acrool-react-table

react react-pagination react-table

Last synced: about 2 months ago
JSON representation

CSS Gird Of React Table Design

• Host: GitHub
• URL: https://github.com/acrool/acrool-react-table
• Owner: acrool
• License: mit
• Created: 2022-08-09T11:22:11.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-09T22:55:20.000Z (7 months ago)
• Last Synced: 2024-11-09T23:45:16.343Z (7 months ago)
• Topics: react, react-pagination, react-table
• Language: TypeScript
• Homepage: https://acrool-react-table.pages.dev/
• Size: 3.1 MB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-react - Acrool React Table - Table (React component)
• awesome-react - Acrool React Table - Table (React component)

README

        
# Acrool React Table



    





    CSS Gird Of React Table Design





[![NPM](https://img.shields.io/npm/v/@acrool/react-table.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-table)

[![npm](https://img.shields.io/bundlejs/size/@acrool/react-table?style=for-the-badge)](https://github.com/acrool/react-table/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/l/@acrool/react-table?style=for-the-badge)](https://github.com/acrool/acrool-react-table/blob/main/LICENSE)

[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-table.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-table)

[![npm](https://img.shields.io/npm/dt/@acrool/react-table.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-table)



## Documentation

- [Getting Started](https://acrool-react-table.pages.dev/docs/getting-started)

- [Faq](https://acrool-react-table.pages.dev/docs/category/faqs)

- [Components](https://acrool-react-table.pages.dev/docs/category/components)

- [Features](https://acrool-react-table.pages.dev/docs/category/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

```bash

yarn add @acrool/react-table

```

## Usage

add in your main.tsx

```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

```tsx

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

const Example = () => {

    return ;

};

```

## Options

if need use `null` value, options type

```json

{

    "compilerOptions": {

        "strictNullChecks": false

    }

}

```

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

[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-table/main/play-in-example-button.svg)](https://acrool-react-table-storybook.pages.dev)

## License

MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)