npm package: @lestetelecom/showrelatorio
Description: virtualized material table whith filters, sort and pieGraph for columns
Author: André Mesquita
Latest version: 1.0.57

# Relatorios Props

| 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',
    ...
  }
]

<ShowRelatorio customColumns={customColumns} data={data} rowHeight={50}/>
```
### customColumns Props

| 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 }) => <div>
      {row[KEY] == 'm' ? 'Male' : 'Female'}
    </div>
  },
  {
    dataKey: 'periodo',
    label: 'Período',
    //inputFilterSelect example
    inputFilterSelect: [
      { value: 'Tarde', label: 'Tarde label' },
      { value: 'Manhã', label: 'Manhã label' },
    ],
    renderGraph: true,
    width: 180,
  },
  {
    ...
  }
]
```