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	Definition
derived	boolean	true|false
key	string	any
frmt	function	function should return {symbol:"quot;,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	Definition
optionalButton	array	array of functions 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	Definition
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;
        }
    }}
    />
}