virtualized material table whith filters, sort and pieGraph for columns
npm install @lestetelecom/showrelatorio| Props | Required | Default value | type | Note |
| ------------- |:-------------:| :-------------:|:-----------:|:--------:|
| customColumns | yes | none | Array | Array de objetos.
| data | yes | none | Array | Array de objetos.
| noFilters | no | false | boolean | render/no render filter row.
| renderGraphBtn| no | true | boolean | render/no render graph and graph button.
| rowHeight | no | 60 | number | height of grid rows ( only numbers, not dynamic).
| tableHeight | no | 400 | number or string | Table Container height.
| noBottomTotal | no | false | boolean | render/no render total in bottom of the table.
| tableType | no | table | string | render a responsive table or a grid whith overflow x and y.
| noFilterIcon | no | false | bool | render/no render filter icons.
| noPaper | no | true | bool | display border and boz shadow around table.
| noDataMessage | no | Sem relatorio, contate o administrador do sistema. | string or React Component | display message when data.length == 0
#### Exemplos
``js
customColumns: [
{
dataKey: 'nome_cli',
label: 'Nome do Cliente',
type: 'string'
}
]
data: [
{
nome_cli: 'clodoaldo alves',
idade: 20,
data_nasc: '2020-06-04',
...
}
]
`$3
| Props | Required | Default value | type | Note |
| --------|:---------| :-------------:|:-----------:|:-----------:|
| dataKey | yes | none | object | object key. |
| label | yes | none | object | Column label. |
| type | no | string | enum | object type: string, bool, number, date... |
| dateType| no | none | enum | 'dd/mm/yyyy', 'yyyy-mm-dd', 'iso'. (to prevent date format erros), all dates are formated in momen(date).format(date or date time + dateType). |
| inputFilterSelect | no | none | array | render a select input over a text input. value, label pair for render data. |
| render | no | none | func | func for custom rendering, receive {row, KEY}. |
| renderGraph| no | true | boolean | render/no render graph for the column.
| noFilter | no | false | boolean | render/no render filter input for the column.
| noSort | no | false | boolean | remove Sort function and icon.
| width | no | 200 | number | column width.
#### Exemplos
`js``
customColumns: [
{
dataKey: 'hora_ligacao',
label: 'Hora da ligação',
type: 'datetime',
dateType: 'iso',
renderGraph: false,
width: 220,
},
{
dataKey: 'gender',
label: 'Gênero',
width: 150,
//render exemple
render: ({ row, KEY }) =>
{row[KEY] == 'm' ? 'Male' : 'Female'}
},
{
dataKey: 'periodo',
label: 'Período',
//inputFilterSelect example
inputFilterSelect: [
{ value: 'Tarde', label: 'Tarde label' },
{ value: 'Manhã', label: 'Manhã label' },
],
renderGraph: true,
width: 180,
},
{
...
}
]