aio-table 2.1.0 → 5.0.1

package/README.md

@@ -1 +1,792 @@
-# aio-table
+# 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
+```javascript
+npm i aio-table
+```
+# Basic
+
+#### countries JSON as aio table model:
+```javascript
+[
+  ...
+  {
+      "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)
+
+```javascript
+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}
+        
+      />
+    );
+  }
+}
+
+```
+![alt text](/images/1-basic.jpg)
+
+### 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
+
+```javascript
+<Table
+  ...
+  columns={[
+    ...
+    {
+      title:'Continent',
+      getValue:(row)=>row.continent,
+      width:120,
+      resizable:true
+    },
+    ...
+  ]}
+  ...
+/>
+```
+![alt text](/images/resize-column.gif)
+
+# Set column toggleShow
+
+```javascript
+<Table
+  ...
+  columns={[
+    ...
+    {
+      title:'Population',
+      getValue:(row)=>row.population,
+      justify:false,
+      width:120,
+      toggleShow:true
+    },
+    ...
+  ]}
+  ...
+/>
+
+```
+![alt text](/images/column-toggleShow.gif)
+# Set column freeze (boolean)
+
+##### default is false
+
+```javascript
+<Table
+  ...
+  columns={[
+    ...
+    {
+      title:'Name',
+      getValue:(row)=>row.name,
+      width:'auto',
+      freeze:true
+    },
+    ...
+  ]}
+  ...
+/>
+
+```
+![alt text](/images/freeze.gif)
+
+# Set column toggleFreeze (boolean)
+
+##### if true user can set column freeze from toolbar.
+##### default is false
+
+```javascript
+<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
+    }
+    ...
+  ]}
+  ...
+/>
+
+```
+![alt text](/images/togglefreeze.gif)
+
+
+# sizing props (headerHeight,rowHeight,rowGap,columnGap,padding)
+
+default value is 36
+```javascript
+<Table
+  ...
+  headerHeight={24}
+  rowHeight={36}
+  rowGap={8}
+  columnGap={1}
+  padding={12}
+  ...
+/>
+```
+![alt text](/images/sizing-props.jpg)
+
+
+# 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
+
+```javascript
+<Table
+  ...
+  columns={[
+    ...
+    {
+      title:'Population',
+      getValue:(row)=>row.population,
+      movable:false
+    }
+    ...
+  ]}
+  ...
+/>
+
+```
+![alt text](/images/movable.gif)
+# 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.
+ 
+```javascript
+<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,
+    }
+  ]}
+  ...
+/>
+    
+```
+![alt text](/images/column-filter.gif)
+##### if you want to filter rows outside of aio table , you can set onChangeFilter props (for example server side filtering)
+```javbascript
+<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
+
+```javascript
+<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.
+
+```javascript
+<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>
+        )
+      }
+    },
+    ...
+  ]}
+  ...
+/>
+```
+![alt text](/images/column-before-after.jpg)
+# 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
+
+```javascript
+<Table
+  ...
+  groups:[
+     {
+        title:'Continent',
+        getValue:(row)=>{
+          return row.continent;
+        }
+     }
+  }
+  ...
+/>
+```
+![alt text](/images/groupby-1.gif)
+ ##### Other Example:
+ 
+ ```javascript
+<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'
+      }
+    }
+  ]}
+  ...
+/>
+```
+![alt text](/images/groupby-2.gif)
+
+# 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
+
+```javascript
+<Table
+  ...
+  sorts={[
+    {
+      title:'Name',
+      getValue:(row)=>row.name,
+      type:'inc'
+    }
+  ]}
+  ...
+/>
+```
+![alt text](/images/sorts.gif)
+# 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. 
+
+```javascript
+<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})
+        }
+      }
+    }
+  ]}
+  ...
+/>
+```
+![alt text](/images/inlineedit.gif)
+
+# Tree data (nested json)
+
+##### nested json example:
+```javascript
+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.
+```javascript
+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}
+      />
+    );
+  }
+}
+```
+![alt text](/images/tree-nested.gif)
+
+# Tree data (flat json)
+
+##### data as array with id and parent id.
+##### flat json example:
+```javascript
+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.
+```javascript
+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} 
+      />
+    );
+  }
+}
+```
+![alt text](/images/tree-nested.gif)
+
+# 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. 
+```javascript
+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'},
+            ]
+          }
+        ]}
+      />
+    );
+  }
+}
+
+```
+![alt text](/images/ganttchart.jpg)
+