https://github.com/systemlight/ra-table

A customized table component for editing operation based on react and antd table.【基于React和antd-table定制的可编辑操作的表格组件】
https://github.com/systemlight/ra-table

antd ra-table react table

Last synced: 19 days ago
JSON representation

A customized table component for editing operation based on react and antd table.【基于React和antd-table定制的可编辑操作的表格组件】

• Host: GitHub
• URL: https://github.com/systemlight/ra-table
• Owner: SystemLight
• License: mit
• Created: 2020-08-10T01:12:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-02T18:06:08.000Z (over 2 years ago)
• Last Synced: 2024-11-14T00:35:31.343Z (3 months ago)
• Topics: antd, ra-table, react, table
• Language: JavaScript
• Homepage:
• Size: 248 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ra-antd-table

> 基于react antd进行拓展的表格组件

### 安装

```

npm install ra-antd-table react antd @ant-design/icons react-resizable js-export-excel

npm i @types/react-resizable --save-dev

```

### 使用示例【TS版本】

```

import React, {useState} from 'react';

import "antd/dist/antd.min.css";

import EditTable from "ra-antd-table";

import {IColumnsType} from "ra-antd-table/dist/interface";

const columns = [

    {

        key: "name",

        dataIndex: "name",

        sortKey: "name",

        title: "姓名"

    },

    {

        key: "age",

        dataIndex: "age",

        sortKey: "age",

        filterKey: "age",

        totalKey: "age",

        width: 180,

        title: "年龄"

    },

    {

        key: "size",

        dataIndex: "size",

        sortKey: "size",

        filterKey: "size",

        title: "位置"

    }

];

const data = [

    {

        key: "1",

        name: "SystemLight",

        age: 23,

        size: 1

    },

    {

        key: "2",

        name: "Lisys",

        age: 18,

        size: 2

    },

    {

        key: "3",

        name: "kirito",

        age: 12,

        size: 3

    }

];

function App() {

    const [colState, setColState] = useState>(columns);

    return (

        <>

            


                

                    columns={colState}

                    data={data} title={"表格标题"}

                    onResize={(e, {size}, i) => {

                        colState[i].width = size.width;

                        setColState([...colState]);

                    }}

                    onChangeHide={(idx, status) => {

                        colState[idx].hide = status;

                        setColState([...colState]);

                    }}

                    onChangePin={(idx, val) => {

                        colState[idx].fixed = val === "none" ? undefined : val;

                        setColState([...colState]);

                    }}

                />

            

        >

    );

}


export default App;

```