virtualized-material-graph-table

A simple Grid for React based react-virtualized and Material-UI.

Features

• Sort asc/desc per column.
• Filter per column.
• Select input for filter.
• Date picker for date column filter.
• Piegraph per column.
• Custom rendering.

Demo

functional table demo

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 | height of Table Container rows. | noBottomTotal | no | false | boolean | render/no render total in bottom of the table.

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

Get Started

1.Install package

npm install virtualized-material-graph-table --save npm i @material-ui/icons

Usage

Here is a basic example of using material-table within a react application.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import VirtualizedMaterialTable from "virtualized-material-graph-table";
import WbSunnyIcon from '@material-ui/icons/WbSunny'
import Brightness2Icon from '@material-ui/icons/Brightness2'

class GraphTable extends Component {
  render() {
    return (
      <div style={{ height: 800 }}>
        <VirtualizedMaterialTable
          customColumns={[
             {
              dataKey: 'nome_cli',
              label: 'Client Name',
              type: 'string',
              width: 200,
            },
            {
              dataKey: 'data_nasc',
              label: 'Birtdhay',
              type: 'date',
              width: 200,
            },
            {
              dataKey: 'data_chegada',
              label: 'Arrival date',
              type: 'datetime',
              dateType: 'dd/mm/yyyy',
              width: 200,
            },
            {
              label: 'Gender',
              dataKey: 'gender',
              width: 180,
              renderGraph: true,
              inputFilterSelect: [
                { value: 'F', label: 'Female' },
                { value: 'M', label: 'Male' },
              ],
            },
            {
              label: 'Cycle',
              dataKey: 'periodo',
              width: 200,
              render: ({ row, KEY }) => {
                return (
                  <div>
                    {row[KEY] == 'Manhã' ? (
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          backgroundImage: 'linear-gradient(red, yellow)',
                          padding: 5,
                          borderRadius: 4,
                          color: '#fff',
                        }}
                      >
                        <WbSunnyIcon />
                        {row[KEY]}
                      </div>
                    ) : (
                      <>
                        {row[KEY] == 'Noite' && (
                          <div
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              backgroundImage: 'linear-gradient(blue, black)',
                              color: '#fff',
                              padding: 5,
                              borderRadius: 4,
                            }}
                          >
                            <Brightness2Icon />
                            {row[KEY]}
                          </div>
                        )}
                      </>
                    )}
                  </div>
                )
              },
            },


          ]}
          data={[
            {
              nome_cli: 'André mesquita',
              data_nasc: '2021-06-04',
              data_chegada: '05/04/2021 15:42:21',
              periodo: 'Noite',
              gender: 'M'
            },
            {
              nome_cli: 'João das Couves',
              data_nasc: '1989-09-17',
              data_chegada: '05/04/2021 07:13:12',
              periodo: 'Manhã',
              gender: 'F'
            },

          ]}
        />
      </div>
    );
  }
}