@braniac/virtual-grid NPM

Table Wrapper for React Virtualized

Usage

<Table
    title={title}
    columns={columns}
    header
    data={data}
    utility={{
        optionalButton:[
            (i)=>{
                return <React.Fragment key={`optional.ele.${i}`}>
                    <IconButton edge="start" className={classes.icon} color="inherit" onClick={close} aria-label="Close">
                        <CloseIcon />
                    </IconButton>
                </React.Fragment>
            }
        ],
        ExportData:(e)=>{
            return true;
        },
        onSearch:(e)=>{ return true;},
        onSort:(o)=>{
            return true;
        },
        onFilter:(o)=>{
            return true;
        }
    }}
    rowHeight={55}
    fixedCols={0}
    minColumnWidth={250}
    actions={{
        onUpdateApply: ({rowIndex,data:value}) => {

            return true;
        },
        onSelectRow:()=>{
            return true;
        },
        onAddRow:({rowIndex,data:value})=>{

            return true;
        }
    }}
/>

Table Props

Property	Type	Allowed Values	Description
`tilte`	string\|element	`any`	Table Header Title
`columns`	`array`	`array of column definition objects`	Array of column definitions
`header`	`boolean`	true\|false	Header visibility
`data`	`array`	`array of objects`	Array of data objects
`utility`	`object`	`utility definition`	Table utility configuration object
`rowHeight`	`number`	`any`	Table Row Height
`fixedCols`	`number`	`any >= 0`	Frozen column count from left
`minColumnWidth`	`number`	`any`	Minimum column width
`actions`	`object`	`action definition`	Table actions column configurations

Column Definition

{    
    label: 'Fat (g)',
    dataKey: 'fat',
    numeric: true,
    visible:true,
    width:200,
    align:"right",
    displayFormat:{
      thousandSeparator:true,
      precision:2,
      suffix:"%",
      currency:{
        derived:true,
        key:"calories",
        frmt:(data)=>{return {id:data,symbol:"LKR",prefixSymbol:false}}
      }
    }
    ,
    filter:{
      enable:true,
      type:"number"
    },
    editor:{
      editable:true,
      type:'number'
    }
}

Property	Type	Allowed Values	Definition
`label`	`string`	`any`
`dataKey`	`string`	`any`
`numeric`	`boolean`	true\|false
`visible`	`boolean`	true\|false
`width`	`number`	`any > minColumnWidth`
`align`	`text`	left\|right\|center
`displayFormat`	`object`	`display format definition`	Optional display format definition for numeric columns
`filter`	`object`	`filter definition`
`editor`	`object`	`editor definition`

Display Format Definition

Property	Type	Allowed Values	Definition
`thousandSeparator`	`boolean`	true\|false
`precision`	`number`	`any > 0`
`suffix`	`string`	`any`	Optional suffix for the formatter
`prefix`	`string`	`any`	Optional prefix for the formatter
`currency`	`object`	`currency format definition`	Optional currency format definition

Currency definition

Property	Type	Allowed Values
`derived`	`boolean`	true\|false
`key`	`string`	`any`
`frmt`	`function`	`function` should return `{symbol:"$",prefixSymbol:true}` format

Filter definition

Property	Type	Allowed Values	Definition
`enable`	`boolean`	true\|false
`type`	`string`	date\|boolean\|number\|text

Editor definition

Property	Type	Allowed Values	Definition
`editable`	`boolean`	true\|false
`type`	`string`	date\|boolean\|number\|text

Utility Definition

{
    optionalButton:[
                (i)=>{
                    return <React.Fragment key={`optional.ele.${i}`}>
                        <IconButton>
                            <CloseIcon />
                        </IconButton>
                    </React.Fragment>
                }
            ],
    ExportData:(e)=>{
        return true;
    },
    onSearch:(e)=>{ return true;},
    onSort:(o)=>{
        return true;
    },
    onFilter:(o)=>{
        return true;
    }
}

Property	Type	Allowed Values
`optionalButton`	`array`	`array` of `function`s should return `element`
`ExportData`	`function`	`function` should return `boolean`
`onSearch`	`function`	`function` should return `boolean`
`onSort`	`function`	`function` should return `boolean`
`onFilter`	`function`	`function` should return `boolean`

####Actions definition

{
    onUpdateApply: ({rowIndex,data:value}) => {
        return true;
    },
    onSelectRow:()=>{
        return true;
    },
    onAddRow:({rowIndex,data:value})=>{
        return true;
    },
    onDeleteRow:({rowIndex,data:value})=>{
        return true;
    },
    renderer:{
            EditRow:(...),
            AddRow:(...),
            DefaultRow:(...)
        }
}

Property	Type	Allowed Values	Definition
`onUpdateApply`	`function`	`function` should return `boolean`
`onSelectRow`	`function`	`function` should return `boolean`
`onAddRow`	`function`	`function` should return `boolean`
`onDeleteRow`	`function`	`function` should return `boolean`
`renderer`	`object`	`action renderer definition`	Optional render definition to override defaults

Action Renderer Definition

Property	Type	Allowed Values
`EditRow`	`function`	`function` returning a `element`
`AddRow`	`function`	`function` returning a `element`
`DefaultRow`	`function`	`function` returning a `element`

Example

const cols = [

  {
    label: 'Dessert',
    dataKey: 'dessert',
    visible:true,
    width:60,
    sortable:true,
    filter:{
      enable:true,
      type:"text"
    },
    editor:{
      editable:false,
      type:'text'
    }
  },
  {
    label: 'Calories (g)',
    dataKey: 'calories',
    numeric: true,
    visible:true,
    sortable:true,
    width:200,
    flexGrow: 1.0
  },
  {
    label: 'Fat (g)',
    dataKey: 'fat',
    numeric: true,
    visible:true,
    flexGrow:1,
    width:200,
    align:"right",
    displayFormat:{
      thousandSeparator:true,
      precision:2,
      suffix:"%",
      currency:{
        derived:true,
        key:"calories",
        frmt:(data)=>{return {id:data,symbol:"LKR",prefixSymbol:false}}
      }
    }
    ,
    filter:{
      enable:true,
      type:"number"
    },
    editor:{
      editable:true,
      type:'number'
    }
  }
];


const data = Array.from({length: 600}, (x,i) => {return  cols.reduce((acc,{dataKey,type,numeric=false},i)=>{

  if(type && type === "boolean")
    acc[dataKey] = Math.floor(Math.random() * Math.floor(3)) %2 === 0 ;
  else
    acc[dataKey] = numeric ? Math.floor(Math.random() * Math.floor(3000)) + 1 : Math.random().toString(36).substring(2);
  return acc;
},{})});

const Sample = (props)=>{
    return  <Table
    title={"Test Table"}
    columns={cols}
    header
    data={data}
    utility={{
        optionalButton:[
            (i)=>{
                return <React.Fragment key={`optional.ele.${i}`}>
                    <IconButton>
                        <CloseIcon />
                    </IconButton>
                </React.Fragment>
            }
        ],
        ExportData:(e)=>{
            return true;
        },
        onSearch:(e)=>{ return true;},
        onSort:(o)=>{
            return true;
        },
        onFilter:(o)=>{
            return true;
        }
    }}
    rowHeight={55}
    fixedCols={0}
    minColumnWidth={250}
    actions={{
        onUpdateApply: ({rowIndex,data:value}) => {
    
            return true;
        },
        onSelectRow:()=>{
            return true;
        },
        onAddRow:({rowIndex,data:value})=>{
    
            return true;
        }
    }}
    />
}