ray-simple-table

use div

install

npm install --save ray-simple-table

Usage

• custom table. use div

import SimpleTable from 'ray-simple-table';
import 'ray-simple-table/assets/index.scss';
const columns = [
  { key: 'name', title: '名称', dataIndex: 'name', width: '30%' },
  { key: 'version', title: '版本', dataIndex: 'version', width: '25%' },
  { key: 'publishDate', title: '发布日期', dataIndex: 'publishDate', width: '25%' },
  { key: 'download', title: '版本下载', dataIndex: 'download', width: '20%' , render: (text, record, index) => {
    const version = record.flag;
    return <a href={`/download?version=${version}`}>联系我们</a>;
  } }
];

const dataSource = [
  { key: '1', name: 'XXX 软件 XXX版本', version: '2.0最新版本', publishDate: '2018年5月18号', flag: 'windows' },
  { key: '2', name: 'XXX 软件 XXX版本', version: '2.0最新版本', publishDate: '2018年5月18号', flag: 'linux' }
];

//render
<SimpleTable
  header="简单表格"
  columns={columns}
  dataSource={dataSource}
  bordered
/>

• single table. use table

import { SingleTable } from 'ray-simple-table';
import 'ray-simple-table/assets/index.scss';

const userCol = [
  { key: 'name', title: '名称', dataIndex: 'name', width: '30%' },
  { key: 'num', title: '编号', dataIndex: 'num', width: '25%' },
  { key: 'depart', title: '部门', dataIndex: 'depart', width: '25%' },
  { key: 'datum', title: '资料', dataIndex: 'datum', width: '20%' , render: (text, record, index) => {
    const num = record.num;
    return <a href={`/download?num=${num}&datum=${text}`}>下载资料</a>;
  } }
];

const random = (num) => Math.floor(Math.random() * num + 1);

const generateData = () => {
  const result = [];
  for (let index = 0; index < 15; index++) {
    result.push({
      key: index,
      name: `ilex-${index}`,
      num: `XAZZSD-${random(index)}`,
      depart: `DEPART-${random(index)}`,
      datum: `dl-${index}`
    });
  }
  return result;
};

//render
<SingleTable
  title="简单表格2"
  columns={userCol}
  dataSource={userDs}
/>

License

MIT