@aeros-ui/tables

Contents

• Table Components
  • Nested Table Components
  • Table Filter Input
  • Table Toolbar
• Tables
  • Selected Policy Table

Table Components

Nested Table Components

import { useState } from 'react';  
import { useTheme } from '@mui/material/styles';  
import MaterialTable from '@material-table/core';  
import TableContainer from '@mui/material/TableContainer'; 
import Table from '@mui/material/Table';   
import TableBody from '@mui/material/TableBody';  
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';
import { NestedTableHeader } from '@aeros-ui/components'; 

export const NestedTableExample = () => {
    const [selectedRowId, setSelectedRowId] = useState(null)
    const [data, setData] = useState([
        {
            firstName: "Patrick",
            lastName: "Langenbach",
            birthMonth: "December",
            birthYear: 1987,
        },
        {
            firstName: "Sarah",
            lastName: "Cheatham",
            birthMonth: "March",
            birthYear: 2017,
        }
    ])
    
    const theme = useTheme();
    
    const handleRowClick = (row, rowId) => {
        const rowCopy = {...row};
        const dataCopy = [...data]
        dataCopy[rowCopy.tableData.id] = rowCopy;
        setSelectedRowId(rowId)
        setData(dataCopy)
    }

    const columns = [
        {
            title: "First Name",
            field: "firstName",
            type: "string",
        },
        {
            title: "Last Name",
            field: "lastName",
            type: "string"
        },
    ]

    const tableSubheaders = ["Birth Month", "Birth Year"]

    return (
        <MaterialTable
            columns={columns}
            data={data}
            detailPanel={({ rowData }) => (
                <TableContainer>
                    <Table>
                        <NestedTableHeader
                            tableSubheaders={tableSubheaders}
                        />
                        <TableBody>
                            <TableRow>
                                <TableCell>
                                    {rowData.birthMonth}
                                </TableCell>
                                <TableCell>
                                    {rowData.birthYear}
                                </TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </TableContainer>
            )}
            onRowClick={(e, selectedRow, togglePanel) => {handleRowClick(selectedRow, selectedRow.tableData.id); togglePanel()}}
            options={{
                detailsPanelType: 'single',
                showDetailPanelIcon: true,
                rowStyle: rowData => ({
                    backgroundColor: selectedRowId === rowData.tableData.id ? theme.palette.common.activeRow : undefined
                })
            }}
        />
    )
}   

Table Filter Input

import MaterialTable from '@material-table/core';  
import { TableFilterInput } from '@aeros-ui/components';  

const TableFilterExample = () => {
    const data = [
        {
            firstName: "Patrick",
            lastName: "Langenbach",
            birthYear: 1987,
        },
        {
            firstName: "Sarah",
            lastName: "Cheatham",
            birthYear: 2017,
        }
    ]

    const columns = [
        {
            title: "First Name",
            field: "firstName",
            type: "string",
            filterComponent: ({ columnDef, onFilterChanged }) => {
                return (
                    <TableFilterInput
                        onChange={(e) => onFilterChanged(columnDef.tableData.id, e.target.value)}
                    />
                )
            }
        },
        {
            title: "Last Name",
            field: "lastName",
            type: "string",
            filterComponent: ({ columnDef, onFilterChanged }) => {
                return (
                    <TableFilterInput
                        onChange={(e) => onFilterChanged(columnDef.tableData.id, e.target.value)}
                    />
                )
            }
        },
        {
            title: "Birth Year",
            field: "birthYear",
            type: "numeric",
            filterComponent: ({ columnDef, onFilterChanged }) => {
                return (
                    <TableFilterInput
                        onChange={(e) => onFilterChanged(columnDef.tableData.id, e.target.value)}
                    />
                )
            },
            customFilterAndSearch: (term, rowData) => {
                return rowData.birthYear.toString().includes(term)
            }
        }
    ]
    return (
        <MaterialTable
            data={data}
            columns={columns}
            options={{
                filtering: true,
                filterCellStyle: { padding: '0.5em' } 
            }}
        />
    )
}   

Table Toolbar

import { useState } from 'react';
import MaterialTable from '@material-table/core';  
import { TableToolbar } from '@aeros-ui/components';  
import { ExportCsv, ExportPdf } from '@material-table/exporters';  

const TableToolbarExample = () => {
    const [density, setDensity] = useState('dense');
    const [showFilters, setFiltering] = useState(false);

    const handleDensityClick = () => {
        density === 'normal' ? setDensity('dense') : setDensity('normal')
    };

    const data = [
        {
            firstName: "Patrick",
            lastName: "Langenbach",
            birthYear: 1987,
        },
        {
            firstName: "Sarah",
            lastName: "Cheatham",
            birthYear: 2017,
        }
    ]

    const columns = [
        {
            title: "First Name",
            field: "firstName",
            type: "string",
        },
        {
            title: "Last Name",
            field: "lastName",
            type: "string"
        },
        {
            title: "Birth Year",
            field: "birthYear",
            type: "numeric"
        }
    ]

    return (
        <MaterialTable
            title={null}
            columns={columns}
            data={data}
            options={{
                columnsButton: true,
                exportAllData: true,
                exportMenu: [{
                    label: 'Export PDF',
                    exportFunc: (cols, datas) => ExportPdf(cols, datas, 'Dataset Name')
                }, {
                    label: 'Export CSV',
                    exportFunc: (cols, datas) => ExportCsv(cols, datas, 'Dataset Name')
                }],
                filtering: showFilters,
                filterCellStyle: { padding: '0.5em' },
                padding: density,
                search: true,
                searchFieldStyle: { marginRight: '1em' }
            }}
            components={{
                Toolbar: props => (
                    <TableToolbar
                        {...props}
                        showFilters={showFilters}
                        onFilterClick={() => setFiltering(!showFilters)}
                        onDensityClick={handleDensityClick}
                    />
                )
            }}
        /> 
    )
}

Tables

Selected Policy Table

import { SelectedPolicyTable } from '@aeros-ui/tables';  

const SelectedPolicyTableExample = () => {
    const rows = ['
        Declaration', 
        '1159-2021', 
        'DFS3923064', 
        'AA GREENSTONE PROPERTIES LLC', 
        '$4,472', 
        '06/22/2021', 
        '06/22/2022'
    ]
    return (
        <SelectedPolicyTable
            rows={rows}
        />
    )
}