TableCustom - Mas Agua

Overview

TableCustom is a powerful table component built on Material React Table (MRT) that provides advanced features including sorting, filtering, pagination, grouping, column visibility control, and data export to Excel and PDF formats.

Import

import TableCustom from '@/components/TableCustom';

Material-UI & MRT Integration

This component is built on top of Material React Table (MRT), which integrates with Material-UI:

import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
import { Box, IconButton, Tooltip } from '@mui/material';

Core Props

data

array

required

Array of data objects to display in the table

columns

array

required

Array of column definitions following MRT column structure with header and accessorKey properties

Feature Control Props

Display & Layout

Enable the top toolbar with search and action buttons

density

boolean

Enable density toggle button (compact/comfortable/spacious)

copy

boolean

Enable click-to-copy functionality for table cells

fullScreen

boolean

default:"false"

Enable fullscreen toggle button

Pagination

pagination

boolean

default:"false"

Enable table pagination

pageSize

number

default:"5"

Number of rows per page when pagination is enabled

Filtering & Sorting

filter

boolean

default:"false"

Enable column filtering

sort

boolean

Enable column sorting

orderBy

string

Column ID to sort by initially

groupBy

string

Column ID to group rows by

grouping

boolean

Enable column grouping functionality

Column Control

hide

boolean

Enable column show/hide functionality

columnVisibility

object

Object controlling which columns are visible (e.g., { columnId: true/false })

onColumnVisibilityChange

function

Callback function when column visibility changes

Selection

checkbox

boolean

default:"false"

Enable row selection with checkboxes

Export

exportExcel

boolean

Enable Excel/CSV export button in toolbar

exportPdf

boolean

Enable PDF export button in toolbar

Custom Styling

header

object

Custom CSS styles for table header cells (MUI sx prop format)

footer

object

Custom CSS styles for table footer/bottom toolbar (MUI sx prop format)

card

object

Custom CSS styles for table container/paper (MUI sx prop format)

Custom CSS styles for top toolbar (MUI sx prop format)

bodyContent

object

Custom CSS styles for table body cells (MUI sx prop format)

Custom Functions

ChangeColorRow

function

Function to conditionally change row background color. Receives row object, returns boolean. Yellow background applied if returns true.

Custom button or component to render in the toolbar

getPage

function

Callback function that receives the table instance

checkAlert

boolean

When true with getPage, shows a “clear alerts” button in toolbar

Usage Examples

Basic Table

const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
];

const data = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
];

<TableCustom data={data} columns={columns} />

Table with Pagination and Sorting

<TableCustom 
  data={data} 
  columns={columns}
  pagination={true}
  pageSize={10}
  sort={true}
  orderBy="name"
/>

Table with Filtering and Search

<TableCustom 
  data={data} 
  columns={columns}
  topToolbar={true}
  filter={true}
  sort={true}
/>

Table with Export Features

<TableCustom 
  data={data} 
  columns={columns}
  topToolbar={true}
  exportExcel={true}
  exportPdf={true}
/>

Table with Row Selection

<TableCustom 
  data={data} 
  columns={columns}
  checkbox={true}
  topToolbar={true}
/>

Table with Grouping

const columns = [
  { accessorKey: 'department', header: 'Department' },
  { accessorKey: 'employee', header: 'Employee' },
  { accessorKey: 'salary', header: 'Salary' },
];

<TableCustom 
  data={data} 
  columns={columns}
  grouping={true}
  groupBy="department"
/>

Table with Grouped Columns

const columns = [
  {
    header: 'Personal Info',
    columns: [
      { accessorKey: 'firstName', header: 'First Name' },
      { accessorKey: 'lastName', header: 'Last Name' },
    ]
  },
  {
    header: 'Contact',
    columns: [
      { accessorKey: 'email', header: 'Email' },
      { accessorKey: 'phone', header: 'Phone' },
    ]
  },
];

<TableCustom data={data} columns={columns} />

Table with Conditional Row Styling

const highlightRow = (row) => {
  return row.original.status === 'alert';
};

<TableCustom 
  data={data} 
  columns={columns}
  ChangeColorRow={highlightRow}
/>

const customButton = (
  <button 
    onClick={handleCustomAction}
    className="px-4 py-2 bg-blue-500 text-white rounded"
  >
    Custom Action
  </button>
);

<TableCustom 
  data={data} 
  columns={columns}
  topToolbar={true}
  btnCustomToolbar={customButton}
/>

Table with Column Visibility Control

const [columnVisibility, setColumnVisibility] = useState({
  id: false,
  email: true,
  name: true,
});

<TableCustom 
  data={data} 
  columns={columns}
  hide={true}
  columnVisibility={columnVisibility}
  onColumnVisibilityChange={setColumnVisibility}
/>

Table with Custom Styling

<TableCustom 
  data={data} 
  columns={columns}
  header={{ 
    backgroundColor: '#f3f4f6',
    fontWeight: 'bold',
    fontSize: '14px'
  }}
  bodyContent={{
    fontSize: '13px'
  }}
  card={{
    borderRadius: '12px',
    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
  }}
/>

Full-Featured Table

<TableCustom 
  data={data} 
  columns={columns}
  topToolbar={true}
  pagination={true}
  pageSize={20}
  filter={true}
  sort={true}
  hide={true}
  density={true}
  copy={true}
  checkbox={true}
  exportExcel={true}
  exportPdf={true}
  orderBy="createdAt"
/>

Column Definition Format

Columns follow the Material React Table format:

const columns = [
  {
    accessorKey: 'id',        // Key to access data
    header: 'ID',             // Display header text
    size: 80,                 // Optional: column width
  },
  {
    accessorKey: 'createdAt',
    header: 'Created',
    Cell: ({ cell }) => {     // Optional: custom cell renderer
      return new Date(cell.getValue()).toLocaleDateString();
    },
  },
];

Export Functionality

Excel/CSV Export

Exports all table data including grouped columns
Handles nested column headers
Formats dates automatically
Filename: Excel-export.csv

PDF Export

Exports current table data
Includes all visible columns
Formats dates automatically
Filename: pdf-export.pdf

Styling Features

Row Striping

Alternating row colors automatically applied:

Odd rows: #f9fafb background
Even rows: #f1f5f9 background
Hover: #e2e8f0 background

Responsive Density

Default density automatically adjusts based on screen width:

Mobile (< 750px): compact
Desktop: comfortable

Localization

Spanish localization included:

“Filas por página” for rows per page
“Ocultar todo” / “Mostrar todo” for hide/show all columns
“Escriba su busqueda” for search placeholder

Source Location

/src/components/TableCustom/index.jsx:30

Dependencies

{
  "material-react-table": "^2.x",
  "@mui/material": "^5.x",
  "export-to-csv": "^1.x",
  "jspdf": "^2.x",
  "jspdf-autotable": "^3.x",
  "react-icons": "^4.x"
}

Notes

Empty tables display a custom “NoRegisterTable” component
Filter state persists using storage.get('filter')
Maximum table height is 50000px when pagination is disabled
Column actions (three-dot menu) are disabled by default
Column dragging is disabled by default
Sticky header is enabled for better scrolling experience

​Overview

​Import

​Material-UI & MRT Integration

​Core Props

​Feature Control Props

​Display & Layout

​Pagination

​Filtering & Sorting

​Column Control

​Selection

​Export

​Custom Styling

​Custom Functions

​Usage Examples

​Basic Table

​Table with Pagination and Sorting

​Table with Filtering and Search

​Table with Export Features

​Table with Row Selection

​Table with Grouping

​Table with Grouped Columns

​Table with Conditional Row Styling

​Table with Custom Toolbar Button

​Table with Column Visibility Control

​Table with Custom Styling

​Full-Featured Table

​Column Definition Format

​Export Functionality

​Excel/CSV Export

​PDF Export

​Styling Features

​Row Striping

​Responsive Density

​Localization

​Source Location

​Dependencies

​Notes

Overview

Import

Material-UI & MRT Integration

Core Props

Feature Control Props

Display & Layout

Pagination

Filtering & Sorting

Column Control

Selection

Export

Custom Styling

Custom Functions

Usage Examples

Basic Table

Table with Pagination and Sorting

Table with Filtering and Search

Table with Export Features

Table with Row Selection

Table with Grouping

Table with Grouped Columns

Table with Conditional Row Styling

Table with Custom Toolbar Button

Table with Column Visibility Control

Table with Custom Styling

Full-Featured Table

Column Definition Format

Export Functionality

Excel/CSV Export

PDF Export

Styling Features

Row Striping

Responsive Density

Localization

Source Location

Dependencies

Notes