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',rowData => rowData.Name !== '' },
            { title: 'LastName', field: 'LastName',validate: rowData => rowData.LastName.length > 3 },
            { title: 'Birth Year', field: 'birthYear', type: 'numeric', validate: rowData => 
  rowData.birthYear > 1900}
          ];


const data = [
   { name: 'Sara', LastName: 'Baran',  birthYear: 1987}
  ];


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

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

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',validate: rowData => rowData.Name=== '' ? 'Name cannot be empty' : '', },
            { title: 'LastName', field: 'LastName', validate: rowData => rowData.LastName.length < 2 ? 'LastName must be have 3 chars' : '',},
            { title: 'Birth Year', field: 'birthYear', type: 'numeric', validate: rowData => rowData.birthYear < 1900 ? 'Birthyear must be after 1900' : '',}
          ];


const data = [
   { name: 'Sarra', LastName: 'Baran', birthYear: 1987}
  ];


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

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