Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

material-ui-sortable-table

Material UI Table component with sorting and pagination functionality

Example of usage npm i npm run dev

<SmartTable
  isLoading={ false }
  data={ data }
  headers={ headers }
  limit={ 40 }
  total={ data.length }
/>

isLoading - the flag that indicates data loading, if true spinner will be shown. Usually it's passed from any state container on request action.

example of tableHeaders

const headers = [{
  alias: 'Name',
  sortable: true,
  dataAlias: 'name',
  format: {
    type: 'link',
    url: 'http://someurl'
  }
}, {
  alias: 'Status',
  sortable: true,
  dataAlias: 'status'
}, {
  alias: 'Birth Date',
  sortable: true,
  dataAlias: 'birthDate',
  format: {
    type: 'date'
  }
}];

alias - name of column in the column header
sortable - show or not sortable icon in the column header
dataAlias - property name of the object in the data array
format - object that sets up any additional info about cell or custom formatting to cell in the row (Button, Link, etc)

example of data

[{
  name: 'John',
  status: 'Single',
  birthDate: '1 Jan 1966'
}, {
  name: 'David',
  status: 'Married',
  birthDate: '5 Feb 1914'
}]

For now that is custom solution and will be changed by build-in functionality in the future release of Material UI components library

About

Material UI Table with sorting and pagination functionality

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.