跳至主要内容

在 NextJs 中使用

讓我們在 5 分鐘內探索 Acrool React Table.

需要的環境​

看看使用範本​

或 從 GitHub

更改 ModuleResolution​

npx 建立預設為 bundler

tsconfig.json
{
    "moduleResolution": "node"
}

新增 style​

src/app/layout.tsx
import './globals.css'
import '@acrool/react-table/dist/index.css';
import '@acrool/react-table/dist/themes/acrool.css'; // (可選的主題)

開始使用​

src/app/page.tsx
'use client'

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

export default function Home() {
   return (
       <Table
           isDark
           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'}},
           ]}
       />
    );
}