All Projects → NewbeeFE → Antd Data Table

NewbeeFE / Antd Data Table

A component that combines antd's Table and Form to do the search, display, and operating jobs for data.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Antd Data Table

Antd Theme Editor
Customize and preview ant design theme and css styles overrides.
Stars: ✭ 22 (-81.51%)
Mutual labels:  antd, storybook
public-ol-web-template
OrangeLoops Web Project Boilerplate
Stars: ✭ 28 (-76.47%)
Mutual labels:  storybook, antd
Storybook Mobile
A storybook addon that helps you create truly mobile-friendly components
Stars: ✭ 93 (-21.85%)
Mutual labels:  storybook
React Koa Login
koa2 + react + react-router(4.0) + redux + webpack + antd
Stars: ✭ 109 (-8.4%)
Mutual labels:  antd
React Admin
React+AntD 后台管理系统解决方案
Stars: ✭ 104 (-12.61%)
Mutual labels:  antd
Spring Security React Ant Design Polls App
Full Stack Polls App built using Spring Boot, Spring Security, JWT, React, and Ant Design
Stars: ✭ 1,336 (+1022.69%)
Mutual labels:  antd
Devtools Ds
UI components, libraries, and templates for building robust devtools experiences.
Stars: ✭ 105 (-11.76%)
Mutual labels:  storybook
Typescript React Hot Reload
A very simple boilerplate for creating React web applications with TypeScript.
Stars: ✭ 92 (-22.69%)
Mutual labels:  antd
React Antd Admin
后台前端管理系统,基于react、typescript、antd、dva及一些特别优秀的开源库实现
Stars: ✭ 117 (-1.68%)
Mutual labels:  antd
Antd Admin Boilerplate
[deprecated][废弃] 以 antd 为基础组件构建的一套中后台管理系统的基本架构模板
Stars: ✭ 103 (-13.45%)
Mutual labels:  antd
Nextjs Wordpress Starter
WebDevStudios Next.js WordPress Starter
Stars: ✭ 104 (-12.61%)
Mutual labels:  storybook
Torch Web
🌍 Web interface to tcping servers
Stars: ✭ 103 (-13.45%)
Mutual labels:  antd
Simple React Calendar
A simple react based calendar component to be used for selecting dates and date ranges
Stars: ✭ 97 (-18.49%)
Mutual labels:  storybook
Antdfront
using next generation data manager and hook、pure function component 、webpack to build antd design pro microfrontend project without umi, cra,dva or rematch
Stars: ✭ 105 (-11.76%)
Mutual labels:  antd
Wp Storybook
📔 Storybook for WordPress Reusable React Components
Stars: ✭ 95 (-20.17%)
Mutual labels:  storybook
Uikit React
UIkit components built with React
Stars: ✭ 111 (-6.72%)
Mutual labels:  storybook
React Antd Admin
用React和Ant Design搭建的一个通用管理后台
Stars: ✭ 1,313 (+1003.36%)
Mutual labels:  antd
Antv
Ant Design of Vue.js 2.0
Stars: ✭ 99 (-16.81%)
Mutual labels:  antd
Jira Clone Angular
A simplified Jira clone built with Angular, ng-zorro and Akita
Stars: ✭ 1,396 (+1073.11%)
Mutual labels:  storybook
Next Terminal
Next Terminal是一个轻量级堡垒机系统,易安装,易使用,支持RDP、SSH、VNC、Telnet、Kubernetes协议。
Stars: ✭ 2,354 (+1878.15%)
Mutual labels:  antd

antd-data-table

npm npm Build Status antd

A component that combines antd's Table and Form to do the search, display, and operating jobs for data.

Feature

Free from:

  • Handling pagination
  • Handling table row selection
  • Writing search field form item components
  • Writing row actions components

Just focus on:

  • Doing the data fetching request and return the data
  • Rendering a specific data field if needed
  • Writing plugin to operate one or many data object(s)

Install

$ yarn add antd-data-table --save

Simplest data table

Demo

import { DataTable } from 'antd-data-table'

const searchFields: SearchField[] = [
  {
    label: 'ID',
    name: 'id',
    type: 'input',
    payload: {
      props: {
        placeholder: 'placeholder'
      }
    }
  },
  {
    label: 'Select',
    name: 'select',
    type: 'select',
    payload: {
      options: [
        { key: '1', label: 'one', value: '1' },
        { key: '2', label: 'two', value: '2' },
        { key: '3', label: 'three', value: '3' }
      ]
    }
  }
]

const columns: TableColumnConfig<any>[] = [
  {
    key: 'id',
    title: 'ID',
    dataIndex: 'id'
  }, {
    key: 'title',
    title: 'Title',
    dataIndex: 'title'
  }
]

const expands: Expand[] = [
  {
    title: 'Body',
    dataIndex: 'body',
    render (value) {
      return value && `${value.substr(0, 100)} ...`
    }
  },
  {
    title: 'User ID',
    dataIndex: 'userId'
  }
]

const onSearch = async ({ page, pageSize, values }) => {
  const res = await axios.get('http://jsonplaceholder.typicode.com/posts', {
    params: {
      _page: page,
      _limit: pageSize,
      ...values
    }
  })
  return {
    dataSource: res.data,
    total: Number(res.headers['x-total-count'])
  }
}
render(
  <DataTable
    rowKey={record => record.id}
    searchFields={searchFields}
    initialColumns={columns}
    initialExpands={expands}
    onSearch={onSearch}
  />
, mountNode)

Guide

Collapsable search field

Sometimes there are many search fields, you could set a maxVisibleFieldCount to automatically have a collapsable form:

Demo

import { DataTable } from 'antd-data-table'

render(
  <DataTable
    rowKey={record => record.id}
    searchFields={searchFields}
    initialColumns={columns}
    onSearch={onSearch}
+   maxVisibleFieldCount={4}
  />
, mountNode)

Row actions

We usually need to write some action buttons for operating a specific record. antd-data-table made it super easy:

Demo

const actions: RowAction[] = [
  {
    label: 'Edit',
    action (record) {
      action('onClick edit')(record)
    }
  },
  {
    label: 'More',
    children: [
      {
        label: 'Remove',
        action (record) {
          action('onClick remove')(record)
        }
      },
      {
        label: 'Open',
        action (record) {
          action('onClick open')(record)
        }
      }
    ]
  }
]

render(
  <DataTable
    rowKey={record => record.id}
    searchFields={searchFields}
    initialColumns={columns}
    initialExpands={expands}
    onSearch={onSearch}
    actions={actions}
  />
, mountNode)

Plugins

Plugins are for operating multiple records. Every plugin will render a component at the top of table.

Demo

Let's write a simplest plugin: A button that show current selected rows' ids:

const ShowIdsBtn = ({ selectedRows, clearSelection }) => {
  const showIds = () => {
    message.info(selectedRows.map(row => row.id).join(','))
    // clear selection after the action is done
    clearSelection()
  }

  return <Button onClick={showIds}>Show Ids</Button>
}

const plugins = [
  renderer (selectedRowKeys, selectedRows, clearSelection) {
    return <ShowIdsBtn selectedRows={selectedRows} clearSelection={clearSelection} />
  }
]

render (
  <DataTable
    rowKey={record => record.id}
    searchFields={searchFields}
    plugins={plugins}
    initialColumns={columns}
    initialExpands={expands}
    onSearch={onSearch}
  />
, mountNode)

Props

name?: string

Unique table name.

rowKey: (record) => string

The key value of a row.

searchFields: SearchField[]

SearchField is an object that contains:

  • label: string Pass to <Form.Item>'s label property.
  • name: string Pass to getFieldDecorator as the decorator name.
  • type?: RenderType antd-data-table comes with some common form item type. Such as input, select.
  • initialValue?: any Inital form value.
  • renderer?: (payload?: object) => React.ReactNode When the form item types are not statisfied, your could write your own renderer. the ReactNode that returned will be wrapped by getFieldDecorator.
  • validationRule?: ValidateionRule[] antd validation rules. Pass to getFieldDecorator(name, { rules }).
  • payload?: { props: any, [key: string]: any } Some params that pass to the renderer.
  • span?: number Form Item Col span value. 6 by default.

out of the box render type

input
interface payload {
  props: object // antd Input props
}

datePicker

interface payload {
  props: object // antd DatePicker props
}

treeSelect

interface payload {
  props: object // antd TreeSelect props
}
select
interface payload {
  props: object, // antd Select props
  options: {
    key: string,
    label: string,
    value: string
  }[]
}

initialColumns: TableColumnConfig[]

antd's TableColumnConfig. See more at https://ant.design/components/form/

initialExpands: Expand[]

type Expand = {
  /** Title of this column **/
  title: string,
  /** Display field of the data record, could be set like a.b.c **/
  dataIndex: string,
  /** Renderer of the column in the expanded. The return value should be a ReactNode **/
  render?: (text: any, record?: {}) => React.ReactNode
}

onSearch<T> (info: SearchInfo): Promise<SearchResponse<T>>

onSearch property need a function that return a Promise, which resolves an object that contains total and dataSource. This function receive a SearchInfo:

type SearchInfo = {
  /** values from `getFieldsValue()` */
  values: any,
  /** current page */
  page: number,
  /** page size */
  pageSize: number
}

title?: React.ReactNode

searchBtnText?: string

clearBtnText?: string

listSelectionBtnText?: string

onError? (err): void

Error handler that trigger when onSearch throw error.

loadDataImmediately?: boolean

Load list data immediately, default is false

onValidateFailed?: (err: ValidateError) => void

Form validation failed handler

pageSize?: number

default is 10

plugins?: Plugin[]

rowActions?: RowAction[]

enableListSelection?: boolean

If true, a list selection button will display on table title.

Be sure to pass the name props if it is enable.

rowSelection?: TableRowSelection

Custom rowSelection.

affixTarget?: () => HTMLelement

For Affix. Specifies the scrollable area dom node

affixOffsetTop?: number

Pixels to offset from top when calculating position of scroll

affixOffsetBottom?: number

Pixels to offset from bottom when calculating position of scroll

FAQ

How to trigger the onSearch action imperatively?

There is a public fetch method in DataTable to do this action. So you could get it from ref:

Demo

// ...
render () {
  let dataTableRef: DataTable | null = null

  const saveDataTableRef = (ref: DataTable) => {
    dataTableRef = ref
  }

  const onClickCustomSearch = () => {
    if (dataTableRef) {
      dataTableRef.fetch(1)
    }
  }

  return (
    <div style={{ padding: '1em' }}>
      <DataTable
        ref={saveDataTableRef}
        name='customSearch'
        rowKey={record => record.id}
        searchFields={searchFields}
        initialColumns={columns}
        initialExpands={expands}
        onSearch={onSearch}
        pageSize={10}
        onError={onError}
      />
      <Button onClick={onClickCustomSearch}>Custom Search</Button>
    </div>
  )
}

fetch: async (page: number, values: object = this.state.currentValues, clearPagination: boolean = false)

Build

$ yarn

$ yarn start # start the storybook

$ yarn test # run the test

$ yarn run build # build the distribution file

$ yarn run build:storybook # build storybook

Release workflow

$ yarn run build:storybook # build storybook

$ npm publish

License

MIT License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].