aio-table (React js all in one table)
aio table options
- data table
- tree table
- support nested data
- support flat data
- keyboar navigation
- inline edit
- group by
- sortable
- filterable
- searchable
- use html or jsx in cells
- freeze mode
- resize columns
- swap columns position
- mobile support
- paging
Installation
npm i aio-tableBasic
countries JSON as aio table model:
[
...
{
"continent":"North America",
"name":"United States",
"population":"331853982",
"percent":"4.21",
"update":"16 Jun 2021"
},
...
]also you can find contries json in repository (countries.js)
import React,{Component} from "react";
import Table from 'aio-table';
import countries from './countries';
import "./style.css";
export default class App extends Component {
state = {model:countries}
render(){
let {model} = this.state;
return (
<Table
className='table'
model={model}
columns={[
{
title:'Name',
getValue:(row)=>row.name,
justify:false,
titleJustify:false,
search:true
},
{
title:'Continent',
getValue:(row)=>row.continent,
width:120,
},
{
title:'Population',
getValue:(row)=>row.population,
justify:false,
width:120,
},
{
title:'Percent',
getValue:(row)=>row.percent,
template:(row)=>row.percent + '%',
width:90,
}
]}
paging={{
number:1,
size:20,
}}
padding={12}
/>
);
}
}
main props:
| props | type | default | description |
|---|---|---|---|
| model | json | Required | data model of table as rows. |
| columns | array of objects | Required | list of table columns. |
| paging | object | optional | configure table paging. |
| groups | array of objects | optional | grouping rows. |
| sorts | array of objects | optional | sorting rows |
| className | string | optional | class name of table. |
| id | string | optional | id of table. |
| style | css object | optional | set table css style. |
| padding | number | 12 | set table padding using padding props.(for better styling dont set padding in style instead set padding props) |
| headerHeight | number | 36 | height of header. |
| rowHeight | number | 36 | height of cells. |
| rowGap | number | 6 | gap between rows. |
| columnGap | number | 0 | gap between columns. |
each column Object:
| column property | type | default | description |
|---|---|---|---|
| title | string | "" | title of column. |
| getValue | function | optional if you set template property on column | get row object as parameter and returns value of table cell based on row. |
| titleJustify | boolean | true | justifying column title. |
| justify | boolean | true | justifying cell content. |
| search | boolean | false | put search input in toolbar for searching rows based on column values. |
| width | number or string or 'auto' | auto | set width of column |
| minWidth | number or string | optional | set min width of column(use in resizing column) |
| template | function | optional | get row as parameter and return cell html |
| resizable | boolean | false | make column resizable |
| movable | boolean | false | male column movable. (swaping columns) |
| show | boolean | true | set column visibility |
| toggleShow | boolean | false | set visibility of column by user from toolbar |
| before | function | optional | get row as parameters and returns html as before cell content |
| after | function | optional | get row as parameters and returns html as after cell content |
Set column resizable
<Table
...
columns={[
...
{
title:'Continent',
getValue:(row)=>row.continent,
width:120,
resizable:true
},
...
]}
...
/>
Set column toggleShow
<Table
...
columns={[
...
{
title:'Population',
getValue:(row)=>row.population,
justify:false,
width:120,
toggleShow:true
},
...
]}
...
/>
Set column freeze (boolean)
default is false
<Table
...
columns={[
...
{
title:'Name',
getValue:(row)=>row.name,
width:'auto',
freeze:true
},
...
]}
...
/>
Set column toggleFreeze (boolean)
if true user can set column freeze from toolbar.
default is false
<Table
...
columns={[
...
{
title:'Name',
getValue:(row)=>row.name,
width:'auto',
toggleFreeze:true
},
{
title:'Population',resizable:true,
getValue:(row)=>row.population,
template:(row)=>numberWithCommas(row.population),
width:'160px',
toggleFreeze:true
}
...
]}
...
/>
sizing props (headerHeight,rowHeight,rowGap,columnGap,padding)
default value is 36
<Table
...
headerHeight={24}
rowHeight={36}
rowGap={8}
columnGap={1}
padding={12}
...
/>
set column movable (boolean)
drag and drop movable columns to swap and reorder.
default is true
for prevent move column set movable property false on column object
<Table
...
columns={[
...
{
title:'Population',
getValue:(row)=>row.population,
movable:false
}
...
]}
...
/>
set column filter (object)
filter rows by column value automatically.
for filter rows based on column , getValue property is required on column.
| property | type | default | description |
|---|---|---|---|
| type | string ('text' or 'number') | 'text' | based on column values. |
<Table
...
columns={[
{
title:'Name',
getValue:(row)=>row.name,
justify:false,
titleJustify:false,
filter:{type:'text'}
},
{
title:'Continent',
getValue:(row)=>row.continent,
width:120,
resizable:true,
},
{
title:'Population',
getValue:(row)=>row.population,
justify:false,
width:120,
filter:{type:'number'}
},
{
title:'Percent',
getValue:(row)=>row.percent,
template:(row)=>row.percent + '%',
width:90,
}
]}
...
/>
if you want to filter rows outside of aio table , you can set onChangeFilter props (for example server side filtering)
<Table
...
onChangeFilter={(filters)=>{
....
}}
...
/>
filters is an array of objects . each object has 3 property (booleanType,items,column)
set paging (object)
paging rows.
properties:
| property | Type | Default | Description |
|---|---|---|---|
| sizes | Array | [1,5,10,20,30] | page sizes (dropdown) |
| size | number | first index of sizes property | rows count per page |
| number | number | 1 | page number |
| onChange | function | Optional | if you set onChange , you must paging rows of model in parent component and aio table will not paging rows automatically |
onChange function get changed paging object as parameters
<Table
...
paging={{
number:1,
sizes:[5,10,15,20],
size:10,
onChange:(paging)=>{
//change model props
//if not set onChange , paging will be automatically on model
}
}}
...
/>Set column before and after (function)
set html before and after cells of column content.
<Table
...
columns={[
...
{
title:'Name',
getValue:(row)=>row.name,
before:(row)=>{
return (
<div
style={{
background:'dodgerblue',
color:'#fff',
borderRadius:'100%',
width:20,
height:20,
display:'flex',
alignItems:'center',
justifyContent:'center',
fontSize:10
}}
>{row._index}</div>
)
},
after:(row)=>{
var colors = {
'Asia':'orange','North America':'blue','South America':'lightblue','Africa':'black','Europe':'green'
}
return (
<div
style={{
background:colors[row.continent],
color:'#fff',
padding:'0 6px',
height:'16px',
fontSize:'10px',
lineHeight:'16px',
textAlign:'center',
borderRadius:'3px'
}}
>{row.continent}</div>
)
}
},
...
]}
...
/>
Set groups (Array Of Objects)
group by rows.
each group properties:
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Required | uniqe title of group item |
| getValue | function | Required | this function get (row) as parameter and return a value category for group by rows. |
| active | boolean | true | active or deactive group item. |
| toggle | boolean | true | if true, user can toggle activity of group item from toolbar |
<Table
...
groups:[
{
title:'Continent',
getValue:(row)=>{
return row.continent;
}
}
}
...
/>
Other Example:
<Table
...
groups={[
{
title:'Populatuion',
getValue:(row)=>{
if(row.population > 1000000000){
return 'More than 1,000,000,000'
}
if(row.population > 500000000){
return 'Between 500,000,000 and 1,000,000,000'
}
if(row.population > 100000000){
return 'Between 100,000,000 and 500,000,000'
}
if(row.population > 50000000){
return 'Between 50,000,000 and 100,000,000'
}
if(row.population > 25000000){
return 'Between 25,000,000 and 50,000,000'
}
return 'Less Than 25,000,000'
}
}
]}
...
/>
Set sorts (Array Of Objects)
sort rows.
each sort properties:
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Required | uniqe title of sort item |
| getValue | function | Required | this function get (row) as parameter and return a value for sort rows. |
| type | string ('inc' or 'dec') | 'inc' | set sort type as increase or decrease. |
| active | boolean | true | active or deactive sort item. |
| toggle | boolean | true | if true, user can toggle activity of sort item from toolbar |
<Table
...
sorts={[
{
title:'Name',
getValue:(row)=>row.name,
type:'inc'
}
]}
...
/>
Set column inlineEdit (Objects)
inline editing cells.
inlineEdit properties:
| Property | Type | Default | Description |
|---|---|---|---|
| type | 'text' or 'number' or 'select' | 'text' | type of inline edit input. |
| disabled | function | Optional | get row as parameter and return boolean. if return true this cell input will be disabled. |
| options | array of objects | required if type is 'select' | options of inline edit input by select type (each option have 2 property(text,value)). |
| onChange | function | required | get row and value as parameters. if return an string means there is an error and cell will show this string as error message. |
<Table
...
columns={[
{
title:'Name',
getValue:(row)=>row.name,
width:'auto',
inlineEdit:{
type:'text',
onChange:(row,value)=>{
row.name = value;
this.setState({model:this.state.model})
}
}
},
{
title:'Population',resizable:true,
getValue:(row)=>row.population,
template:(row)=>numberWithCommas(row.population),
width:'100px',
inlineEdit:{
type:'number',
onChange:(row,value)=>{
row.population = value;
this.setState({model:this.state.model})
}
}
},
{
title:'Percent',
getValue:(row)=>row.percent,
template:(row)=>row.percent + '%',
width:'70px'
},
{
title:'Continent',
getValue:(row)=>row.continent,
width:'120px',
inlineEdit:{
type:'select',
options:[
{text:'Asia',value:'Asia'},
{text:'Africa',value:'Africa'},
{text:'Europa',value:'Europa'},
{text:'North America',value:'North America'},
{text:'South America',value:'South America'}
],
onChange:(row,value)=>{
row.continent = value;
this.setState({model:this.state.model})
}
}
}
]}
...
/>
Tree data (nested json)
nested json example:
let nestedData = [
{
name:'Applications',id:'1',
childs:[
{name:'Calendar',id:'2',type:'app'},
{name:'Chrome',id:'3',type:'app'},
{name:'Webstorm',id:'4',type:'app'}
]
},
{
name:'Documents',id:'5',
childs:[
{
name:'Angular',id:'6',
childs:[
{
name:'SRC',id:'7',
childs:[
{name:'Compiler',id:'8',type:'ts'},
{name:'Core',id:'9',type:'ts'},
]
},
]
},
{
name:'Material2',id:'10',
childs:[
{
name:'SRC',id:'11',
childs:[
{name:'Button',id:'12',type:'ts'},
{name:'Checkbox',id:'13',type:'ts'},
{name:'Input',id:'14',type:'ts'}
]
}
]
},
]
},
{
name:'Downloads',id:'15',
childs:[
{name:'October',id:'16',type:'pdf'},
{name:'November',id:'17',type:'pdf'},
{name:'Tutorial',id:'18',type:'pdf'}
]
},
{
name:'Pictures',id:'19',
childs:[
{
name:'Library',id:'20',
childs:[
{name:'Contents',id:'21',type:'dir'},
{name:'Pictures',id:'22',type:'dir'}
]
},
{name:'Sun',id:'23',type:'png'},
{name:'Woods',id:'24',type:'jpg'}
]
}
]set getRowChilds function for get rows childs.
set column treeMode for collapse and indent rows.
export default class App extends Component {
render(){
return (
<Table
className='table'
model={nestedData}
columns={[
{
title:'Name',
getValue:(row)=>row.name,
justify:false,
titleJustify:false,
treeMode:true
},
{
title:'Type',
getValue:(row)=>row.type
}
]}
getRowChilds={(row)=>row.childs}
/>
);
}
}
Tree data (flat json)
data as array with id and parent id.
flat json example:
let flatData = [
{name:'Applications',id:'1'},
{name:'Calendar',id:'2',type:'app',parentId:'1'},
{name:'Chrome',id:'3',type:'app',parentId:'1'},
{name:'Webstorm',id:'4',type:'app',parentId:'1'},
{name:'Documents',id:'5'},
{name:'Angular',id:'6',parentId:'5'},
{name:'SRC',id:'7',parentId:'6'},
{name:'Compiler',id:'8',type:'ts',parentId:'7'},
{name:'Core',id:'9',type:'ts',parentId:'7'},
{name:'Material2',id:'10',parentId:'5'},
{name:'SRC',id:'11',parentId:'10'},
{name:'Button',id:'12',type:'ts',parentId:'11'},
{name:'Checkbox',id:'13',type:'ts',parentId:'11'},
{name:'Input',id:'14',type:'ts',parentId:'11'},
{name:'Downloads',id:'15'},
{name:'October',id:'16',type:'pdf',parentId:'15'},
{name:'November',id:'17',type:'pdf',parentId:'15'},
{name:'Tutorial',id:'18',type:'pdf',parentId:'15'},
{name:'Pictures',id:'19'},
{name:'Library',id:'20',parentId:'19'},
{name:'Contents',id:'21',type:'dir',parentId:'20'},
{name:'Pictures',id:'22',type:'dir',parentId:'20'},
{name:'Sun',id:'23',type:'png',parentId:'19'},
{name:'Woods',id:'24',type:'jpg',parentId:'19'}
]set getRowParentId function for get rows parent id.
set getRowId function for get rows id.
set column treeMode for collapse and indent rows.
export default class App extends Component {
render(){
return (
<Table
className='table'
model={flatData}
columns={[
{
title:'Name',
getValue:(row)=>row.name,
justify:false,
titleJustify:false,
treeMode:true
},
{
title:'Type',
getValue:(row)=>row.type
}
]}
getRowId={(row)=>row.id}
getRowParentId={(row)=>row.parentId}
/>
);
}
}
Gantt chrt example
for set column as gantt chart , you can set a column by template:'gantt'.
gantt column can have all column properties and must have this properties:
| Property | Type | Default | Description |
|---|---|---|---|
| template | string('gantt') | Required | define column as gantt. |
| getKeys | function | Required | return gantt keys array. |
| getStart | function | required | get row a parameter and return an string as start of row bar(one of keys). |
| getEnd | function | required | get row a parameter and return an string as end of row bar(one of keys). |
| getProgress | function | Optional | get row as parameter and return a number between 0 and 100 to show row percentage graphically. |
| getText | function | Optional | get row as parameter and return an string to show on row gantt bar. |
| padding | string(px) | '36px' | gantt horizontal padding. |
| getBackgroundColor | function | a function that return '#69bedb' | get row as parameter and return an string as gant bar background color. |
| getColor | function | a function that return '#fff' | get row as parameter and return an string as gant bar text color. |
| getFlags | function | Optional | return an array of objects (Examplae [{color:'red',value:'2022/6'}]) as gantt flags. |
export default class App extends Component {
state = {
model:[
{name:'a',startDate:'2022/1',endDate:'2022/6',progress:10},
{name:'b',startDate:'2022/1',endDate:'2022/3',progress:20},
{name:'c',startDate:'2022/3',endDate:'2022/6',progress:50},
{name:'d',startDate:'2022/6',endDate:'2022/9',progress:30},
{name:'e',startDate:'2022/9',endDate:'2022/12',progress:100},
{name:'f',startDate:'2022/1',endDate:'2022/9',progress:80},
{name:'g',startDate:'2022/3',endDate:'2022/9',progress:70},
{name:'h',startDate:'2022/6',endDate:'2022/12',progress:60},
{name:'i',startDate:'2022/9',endDate:'2022/12',progress:50},
]
}
render(){
var {model} = this.state;
return (
<Table
model={model}
columns={[
{
title:'Name',
getValue:(row)=>row.name,
width:'80px',
},
{
title:'My Gantt',
minWidth:'400px',
toggleShow:true,
template:'gantt',
getStart:(row)=>row.startDate,
getEnd:(row)=>row.endDate,
getKeys:()=>['2022/1','2022/2','2022/3','2022/4','2022/5','2022/6','2022/7','2022/8','2022/9','2022/10','2022/11','2022/12'],
getProgress:(row)=>row.progress,
getText:(row)=>row.name + ' ' + row.progress + '%',
padding:'24px',
getBackgroundColor:(row)=>'lightblue',
getColor:(row)=>'#fff',
getFlags:()=>[
{color:'red',value:'2022/6'},
{color:'red',value:'2022/9'},
]
}
]}
/>
);
}
}