material-table簡單而強大的 React 數(shù)據(jù)表

material-table 是一個 React 數(shù)據(jù)表，基于具有附加功能的 material-ui 表。

主要特點

• 自定義行為（輕松添加一個或多個基于行的操作）
• 組件覆蓋（可以覆蓋 material-table 的任何組件）
• 自定義列渲染（可以根據(jù)行數(shù)據(jù)為列設置自定義渲染）
• 詳細信息面板（可以輕松地為每一行設置詳細信息面板）
• 可編輯（material-table 的數(shù)據(jù)可編輯）
• 可導出（可以將數(shù)據(jù)導出為 CSV）
• 過濾器（內(nèi)聯(lián)過濾器組件，可對數(shù)據(jù)創(chuàng)建自定義過濾器）
• 可分組（分組功能允許通過拖放來創(chuàng)建數(shù)據(jù)運行組）
• 本地化（可以輕松更改 material-table 的文本）
• 遠程數(shù)據(jù)（允許遠程管理數(shù)據(jù)）
• 搜索（允許搜索數(shù)據(jù)上的任何文本）
• 選擇（可以選擇行）
• 排序（在列上具有排序功能）
• 可選樣式（輕松地為 material-table 的組件添加樣式）
• 樹數(shù)據(jù)（可以輕松管理 material-table 中的嵌套數(shù)據(jù)）
• 驗證（可以在編輯/添加期間驗證字段）

用例

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import MaterialTable from 'material-table'

class App extends Component {
  render() {
    return (
      <div style={{ maxWidth: '100%' }}>
        <MaterialTable
          columns={[
            { title: 'Ad?', field: 'name' },
            { title: 'Soyad?', field: 'surname' },
            { title: 'Do?um Y?l?', field: 'birthYear', type: 'numeric' },
            { title: 'Do?um Yeri', field: 'birthCity', lookup: { 34: '?stanbul', 63: '?anl?urfa' } }
          ]}
          data={[{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 }]}
          title="Demo Title"
        />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('react-div'));