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