DataTable with API ( Material-Table ) - in React js

 

Data- table / Material- Table

material-table is a simple and powerful Data table for React based on Material-UI Table with some additional features.

Material- table, installation
-> installation

Options property could be given to component as options property. You can change behaviour of grid.

Field	Type	Default	Description
actionsCellStyle	object		Actions cell style
actionsColumnIndex	number	0	Order of actions column
addRowPosition	first or last	last	Position of add row
columnsButton	boolean	false	Flag for columns button that controls which column could be rendered
cspNonce	string		cspNonce for react-beautiful-dnd context
debounceInterval	number	200	debounce interval for search and filter
detailPanelColumnAlignment	left or right	left	Detail panel column alignment.
detailPanelType	single or multiple	multiple	Detail panel visibility type.
doubleHorizontalScroll	boolean	false	Flag for double scroll bar for long tables
emptyRowsWhenPaging	boolean	true	Flag for rendering rows to complete page size
exportAllData	boolean	false	Flag for export all data instead of rendered data
exportButton	boolean	false	Flag for export button that render export buttons
exportDelimiter	string	,	Delimiter to use in exported CSV file
exportFileName	string	Title	Exported file name
exportCsv	func		Function to create a custom CSV file
filtering	boolean	false	Flag for filtering row
filterCellStyle	object		Filter cell style for all filter cells
fixedColumns	object		Please check fixed columns examples
grouping	boolean	true	Flag for groupbar visibility
header	boolean	true	Flag for header visibility
headerStyle	object		Header cell style for all headers
loadingType	overlay or linear	overlay	Loading animation type
maxBodyHeight	number or string		Max body height
minBodyHeight	number or string		Min body height
initialPage	number	0	Initial Page Number
padding	default or dense	default	Padding of cells and rows
paging	boolean	true	Flag for paging feature
pageSize	numeric	5	Number of rows that would be rendered on every page
pageSizeOptions	array	[5, 10, 20]	Page size options that could be selected by user
paginationType	normal or stepped	normal	Flag for pagination type
rowStyle	object or func		Css style to be applied rows
showEmptyDataSourceMessage	boolean	true	Flag for showing message if there is no data in table
showFirstLastPageButtons	boolean	true	Flag for showing first and last page buttons on pagination component
showSelectAllCheckbox	boolean	true	Flag for showing select all checkbox
showTextRowsSelected	boolean	true	Flag for showing selected rows text on toolbar
search	boolean	true	Flag for search feature
searchAutoFocus	boolean	false	Initialize search field focused
searchFieldAlignment	string	'right'	Alignment for search text field in toolbar
searchFieldStyle	object	{}	Search field css style
searchFieldVariant	string	'standard'	Search field variant
searchText	string		Initialize search field before table was render
selection	boolean	false	Flag for selection feature
selectionProps	object or func	{}	Selection checkbox props
sorting	boolean	true	Flag to activate or disable sorting feature of table
tableLayout	auto or fixed	auto	To make columns width algorithm auto or fixed
toolbar	boolean	true	Flag for toolbar
showTitle	boolean	true	Flag for title
toolbarButtonAlignment	left or right	'right'	Alignment for buttons in toolbar
draggable	boolean	true	Flag for drag and drop headers
thirdSortClick	boolean	true	Flag to allow unsorted state on third header click

Get Started ...

   

  import React from 'react';

  import MaterialTable from 'material-table'

  function App() {

    return (

    <div>

    <div style={{ maxWidth: '90%' }}>

    <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>

    </div>

    );

  }

  export default App;

Table data from an External API in Material Table
 || Material UI

   

    

  import React, { useState, useEffect } from 'react';

  import './App.css';

  import MaterialTable from 'material-table'

  function App() {

    const [data, setData] = useState([])

    const columns = [

      { title: "ID", field: "id" },

      { title: "Username", field: "username" },

      { title: "Name", field: "name" },

      { title: "Email", field: "email" },

      { title: "Phone", field: "phone" },

      { title: "Web Link", field: 'website' }

    ]

    useEffect(() => {

      fetch("https://jsonplaceholder.typicode.com/users")

        .then(resp => resp.json())

        .then(resp => {

          setData(resp)

        })

    }, [])

    return (

      <div className="App">

        <h1 align="center">React-App</h1>

        <h4 align='center'>Material Table</h4>

        <MaterialTable

          title="Employee Data"

          data={data}

          columns={columns}

        />

      </div>

    );

  }

  export default App;