Miss any of our Open RFC calls?Watch the recordings here! »

@jimengio/rough-table

0.2.29-a1 • Public • Published

Rough Table

A table component for places where antd is too large to fit.

Usage

Currently the main component maintained is RoughDivTable. As the name indicated this component is rendered in <div/>s. And it has very few features in order to keep fast.

目前提供做 3 个表格组件:

  • RoughTable 基于 <table> 简单封装的 table
  • RoughDivTable<div> 配合 Flexbox 简单封装的 table
  • ScrollDivTable<div> 实现的带横向滚动的 table
import { RoughDivTable } from "@jimengio/rough-table";
 
let columns: IRoughTableColumn<IData>[] = [
  { title: "物料编号", dataIndex: "code", render: (item: IData["code"], record: IData) => item },
  { title: "名称", dataIndex: "name", render: (item: IData["name"], record: IData) => item },
  { title: "型号", dataIndex: "model", render: (item: IData["model"], record: IData) => item },
  { title: "操作", dataIndex: "model", width: 80, render: (item: any, record: IData) => <ActionLinks actions={actions} spaced /> },
];
 
<RoughDivTable data={data} columns={columns} rowPadding={24} pageOptions={{ current: 1, total: 100, pageSize: 10, onChange: (x) => {} }} />;

Details about props:

// a faked data...
interface IData {
  name: string;
}
 
export interface IRoughTableColumn<IData> {
  title: ReactNode;
  hidden?: boolean;
  width?: number | string;
  className?: string;
  style?: CSSProperties;
  dataIndex: keyof T;
  render?: (value: any, record: T, itemIndex?: number) => ReactNode;
}
 
interface IProps {
  className?: string;
  data: { [k: string]: any }[];
  /** it renders each item of data into an array */
  columns: IRoughTableColumn<IData>;
  rowPadding?: number;
  cellClassName?: string;
  /** Display empty symbol rather than set it transparent */
  showEmptySymbol?: boolean;
  selectedKeys?: string[];
  rowKey?: string;
  onRowClick?: (record: IData) => void;
  /** antd pagination */
  pageOptions?: PaginationProps;
  /** Default locale is "no data" */
  emptyLocale?: string;
}

ActionLinks creates the links of editing:

import { ActionLinks, IActionLinkItem } from "@jimengio/rough-table";
 
let actions: IActionLinkItem[] = [
  {
    text: "修改",
    onClick: () => {},
  },
  {
    text: "删除",
    onClick: () => {},
  },
];
 
<ActionLinks actions={actions} spaced />;

Workflow

https://github.com/jimengio/ts-workflow

License

MIT

Keywords

none

Install

npm i @jimengio/rough-table

DownloadsWeekly Downloads

229

Version

0.2.29-a1

License

MIT

Unpacked Size

129 kB

Total Files

61

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar