material-table یک کامپوننت در react می باشد که ایجاد جدول را سهولت می بخشد.با استفاده از این کامپوننت کافی است ستون ها و داده های جدول را در data و columns در تگ MaterialTable تعریف کنیم.

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: 'Name', field: 'Name' },
            { title: 'LastName', field: 'LastName' },
            { title: 'City', field: 'City'}
          ]}
          data={[{ name: 'Sarra', LastName: 'Baran', City: Yazd}]}
          title="Demo Title"
        />
      </div>
    )
  }
}

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

میتوانیم ستونها و داده ها را در یک متغیر قرار دهیم و  سپس از  این متغیرها در تگ MaterialTable استفاده کنیم.

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


class App extends Component {

const columns = [
            { title: 'Name', field: 'Name' },
            { title: 'LastName', field: 'LastName' },
            { title: 'City', field: 'City'}
          ];


const data = [
   { name: 'Sarra', LastName: 'Baran', City: Yazd}
  ];


  render() {
    return (
      <div style={{ maxWidth: '100%' }}>
        <MaterialTable
          columns={columns}
          data={data }
          title="NAMES"
        />
      </div>
    )
  }
}

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

این کامپوننت قابلیتهای زیادی دارد مانند مرتب سازی دادها، فیلترینگ داده ها و غیره.برای انجام این کارها، به صورت زیر عمل می کنیم:

<MaterialTable
      title="NAMES"
      data={data}
      columns={columns}
      options={{ search: true, paging: false, filtering: true,sorting:true }}
/>