Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

smart-grid-g

Package Overview
Dependencies
11
Maintainers
8
Versions
296
Issues
File Explorer

Advanced tools

smart-grid-g

gantd smart-grid-g

    0.2.46latest
    GitHub

Version published
Maintainers
8
Weekly downloads
60
decreased by-93.63%

Weekly downloads

Readme

Source

smart-table-g


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

NPM version

Screenshot

Demo

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

install

rc-tabs

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

Anthor

GantFDT

License

MIT

Keywords

FAQs

Last updated on 18 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc