smart-table-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