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:"$",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;
        }
    }}
    />
}