smart-grid-g

smart-table-g

---

Dynamically and configurable column properties with Multiview support of table component based on antd with React

Screenshot

Demo

online example: https://favori.gitee.io/gantd-landing (CodePen)

install

Feature

• Dynamically and configurable column properties
• Dynamically configurable table style properties
• Multi-view support

Usage

import React from 'react'; import SmartTable from 'smart-table-g'; import { Tag, Divider } from 'antd'; function BasicUse() { const tableColumns = [ { title: 'name', fieldName: 'name', render: text => <a>{text}</a>, }, { title: 'age', fieldName: 'age', }, { title: 'address', fieldName: 'address', }, { title: 'tags', fieldName: 'tags', render: tags => ( <span> {tags.map(tag => { let color = tag.length > 5 ? 'geekblue' : 'green'; if (tag === 'loser') { color = 'volcano'; } return ( <Tag color={color} key={tag}> {tag.toUpperCase()} </Tag> ); })} </span> ), }, { title: 'action', fieldName: 'action', render: (text, record) => ( <span> <a>invite {record.name}</a> <Divider type="vertical" /> <a>delete</a> </span> ), }, ] const dataSource = [ { key: '1', name: 'Mr someone1', age: 32, address: 'custom address', tags: ['Otaku', 'Developer'], }, { key: '2', name: 'Mr someone2', age: 42, address: 'custom address', tags: ['Product manager'], }, { key: '3', name: 'Mr someone3', age: 32, address: 'custom address', tags: ['Teacher'], }, ] return <div style={{ margin: 10 }}> <SmartTable tableKey="BasicUse" schema={tableColumns} dataSource={dataSource} /> </div> } React.render(<BasicUse/>, mountNode);

API

Documentation

Contact

• Create a Github issue for bug reports, feature requests, or questions
• Follow @GantFDT for announcements
• Add a ⭐️ star on GitHub to support the project❤️!

Anthor

GantFDT

License

MIT