Skip to content

vorlov/material-ui-sortable-table

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published