@lestetelecom/showrelatorio NPM

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

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

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