TableCustom

Overview

The TableCustom component is a powerful, feature-rich table wrapper built on material-react-table. It provides extensive functionality for displaying and manipulating tabular data including filtering, sorting, grouping, pagination, and data export to Excel and PDF formats.

Import

import TableCustom from '../../../components/TableCustom'

Props

data

array

required

Array of data objects to display in the table. Each object represents a row.

data={[
  { id: 1, name: 'Sensor A', value: 45.2, status: 1 },
  { id: 2, name: 'Sensor B', value: 32.8, status: 0 }
]}

columns

array

required

Column definitions array. Each column object can include:

header: Column header text
accessorKey: Key to access data in row objects
size: Column width
Cell: Custom cell renderer function

columns={[
  { header: 'ID', accessorKey: 'id', size: 75 },
  { header: 'Name', accessorKey: 'name', size: 200 },
  { 
    header: 'Status', 
    accessorKey: 'status',
    Cell: ({ row }) => row.original.status ? 'Active' : 'Inactive'
  }
]}

Feature Configuration Props

pagination

boolean

default:"false"

Enable pagination controls.

pageSize

number

default:"5"

Number of rows per page when pagination is enabled.

Show the top toolbar with search, filter, and action buttons.

filter

boolean

default:"false"

Enable column filtering capabilities.

sort

boolean

default:"false"

Enable column sorting.

hide

boolean

default:"false"

Allow users to show/hide columns.

grouping

boolean

default:"false"

Enable column grouping functionality.

groupBy

string

Column accessor key to group by initially.

groupBy="category"

orderBy

string

Column accessor key to sort by initially (ascending order).

orderBy="date"

density

string

Initial table density. Options: compact, comfortable, spacious.

checkbox

boolean

default:"false"

Enable row selection with checkboxes.

copy

boolean

default:"false"

Enable click-to-copy functionality for cells.

Export Props

exportExcel

boolean

default:"false"

Show Excel export button in toolbar.

exportPdf

boolean

default:"false"

Show PDF export button in toolbar.

Styling Props

header

object

Custom styles object for table header cells.

header={{ backgroundColor: '#f0f0f0', fontWeight: 'bold' }}

footer

object

Custom styles for the bottom toolbar.

card

object

Custom styles for the table container.

bodyContent

object

Custom styles for table body cells.

Custom styles for the top toolbar.

Advanced Props

Custom buttons to add to the toolbar.

btnCustomToolbar={<Button>Custom Action</Button>}

ChangeColorRow

function

Function to conditionally change row background color.

ChangeColorRow={(row) => row.original.alert === true}

Returns yellow background if true.

columnVisibility

object

Initial column visibility state.

columnVisibility={{ id: false, internalCode: false }}

onColumnVisibilityChange

function

Callback when column visibility changes.

getPage

function

Callback function that receives the table instance.

checkAlert

boolean

Show a “clear alerts” button in toolbar when combined with getPage.

Usage Examples

Basic Table

const columns = [
  { header: 'ID', accessorKey: 'id' },
  { header: 'Name', accessorKey: 'name' },
  { header: 'Value', accessorKey: 'value' }
]

const data = [
  { id: 1, name: 'Sensor A', value: 45.2 },
  { id: 2, name: 'Sensor B', value: 32.8 }
]

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

<TableCustom
  columns={columns}
  data={charts}
  pagination={true}
  pageSize={10}
  topToolbar={true}
  filter={true}
  sort={true}
  hide={true}
/>

Table with Excel and PDF Export

<TableCustom
  columns={columnsTable}
  data={alarms}
  pagination={true}
  pageSize={15}
  topToolbar={true}
  exportExcel={true}
  exportPdf={true}
  filter={true}
  sort={true}
/>

Table with Custom Cell Rendering

const columns = [
  { header: 'ID', accessorKey: 'id', size: 75 },
  { header: 'Title', accessorKey: 'name', size: 300 },
  {
    header: 'Status',
    accessorKey: 'status',
    Cell: ({ row }) => (
      <Typography
        variant="body2"
        fontWeight={700}
        sx={{
          color: row.original.status ? 'success.main' : 'error.main',
        }}
      >
        {row.original.status ? 'Active' : 'Inactive'}
      </Typography>
    ),
  },
  {
    header: 'Actions',
    accessorKey: 'actions',
    Cell: ({ row }) => (
      <Box display="flex" gap={1}>
        <Button 
          variant="contained" 
          size="small"
          onClick={() => handleEdit(row.original.id)}
        >
          Edit
        </Button>
        <Button 
          variant="outlined" 
          size="small"
          onClick={() => handleDelete(row.original.id)}
        >
          Delete
        </Button>
      </Box>
    ),
  },
]

<TableCustom
  columns={columns}
  data={data}
  pagination={true}
  pageSize={10}
  topToolbar={true}
/>

Table with Grouped Columns

const columns = [
  { header: 'ID', accessorKey: 'id' },
  {
    header: 'Measurements',
    columns: [
      { header: 'Temperature', accessorKey: 'temp' },
      { header: 'Pressure', accessorKey: 'pressure' },
      { header: 'Flow', accessorKey: 'flow' }
    ]
  },
  { header: 'Status', accessorKey: 'status' }
]

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

Table with Row Selection

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

Compact Mobile Table

<TableCustom
  columns={columns}
  data={data}
  density="compact"
  pagination={true}
  pageSize={5}
/>

Common Use Cases

Admin Dashboard
Monitoring Data
Grouped Data
Custom Toolbar

import { useState, useEffect } from 'react'
import TableCustom from '../../../components/TableCustom'
import { request } from '../../../utils/js/request'

function ChartsTable() {
  const [charts, setCharts] = useState([])
  const [columns, setColumns] = useState([])

  useEffect(() => {
    fetchData()
  }, [])

  const fetchData = async () => {
    const { data } = await request('/api/charts', 'GET')
    
    const cols = [
      { header: 'ID', accessorKey: 'id', size: 75 },
      { header: 'Title', accessorKey: 'name', size: 300 },
      { header: 'Type', accessorKey: 'type' },
      { header: 'Order', accessorKey: 'order' },
      {
        header: 'Actions',
        accessorKey: 'actions',
        Cell: ({ row }) => (
          <Button onClick={() => handleEdit(row.original.id)}>
            Edit
          </Button>
        ),
      },
    ]
    
    setColumns(cols)
    setCharts(data)
  }

  return (
    <TableCustom
      columns={columns}
      data={charts}
      pagination={true}
      pageSize={10}
      topToolbar={true}
      filter={true}
      sort={true}
      hide={true}
      exportExcel={true}
      exportPdf={true}
    />
  )
}

function SensorDataTable({ sensorId }) {
  const [data, setData] = useState([])

  const columns = [
    { header: 'Timestamp', accessorKey: 'timestamp' },
    { header: 'Value', accessorKey: 'value' },
    { header: 'Unit', accessorKey: 'unit' },
    {
      header: 'Status',
      accessorKey: 'status',
      Cell: ({ row }) => (
        <span className={row.original.inRange ? 'text-green-600' : 'text-red-600'}>
          {row.original.inRange ? 'Normal' : 'Alert'}
        </span>
      ),
    },
  ]

  return (
    <TableCustom
      columns={columns}
      data={data}
      pagination={true}
      pageSize={20}
      topToolbar={true}
      orderBy="timestamp"
      ChangeColorRow={(row) => !row.original.inRange}
      exportExcel={true}
    />
  )
}

function GroupedTable() {
  const columns = [
    { header: 'Plant', accessorKey: 'plant' },
    { header: 'Sensor', accessorKey: 'sensor' },
    { header: 'Value', accessorKey: 'value' },
  ]

  return (
    <TableCustom
      columns={columns}
      data={data}
      groupBy="plant"
      grouping={true}
      topToolbar={true}
      pagination={true}
    />
  )
}

function CustomToolbarTable() {
  const handleCustomAction = () => {
    console.log('Custom action triggered')
  }

  return (
    <TableCustom
      columns={columns}
      data={data}
      topToolbar={true}
      btnCustomToolbar={
        <Button 
          variant="contained" 
          onClick={handleCustomAction}
          startIcon={<AddIcon />}
        >
          Add New
        </Button>
      }
      exportExcel={true}
      filter={true}
    />
  )
}

Component Source

Location: ~/workspace/source/src/components/TableCustom/index.jsx

Empty State

When the table has no data, it displays a custom “No Registros” (No Records) component with an illustration. Location: ~/workspace/source/src/components/TableCustom/NoRegisterTable/index.jsx

TableCustom automatically adapts to mobile devices with a compact density setting when the screen width is less than 750px.

Export Functionality

Excel Export

The Excel export includes:

Grouped column headers (if using nested columns)
All visible data (respects filters)
Automatic date formatting
Configurable filename (default: “Excel-export.csv”)

PDF Export

The PDF export includes:

All column headers
All visible rows
Automatic date formatting
Configurable filename (default: “pdf-export.pdf”)

Styling Features

Alternating Row Colors

The table automatically applies alternating row colors:

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

Conditional Row Highlighting

Use the ChangeColorRow prop to highlight specific rows:

<TableCustom
  columns={columns}
  data={data}
  ChangeColorRow={(row) => row.original.alert === true}
/>

Matching rows will have a yellow background with black text.

Localization

The component is localized to Spanish:

“Filas por página” - Rows per page
“Ocultar todo” - Hide all
“Mostrar todo” - Show all
“Escriba su búsqueda” - Write your search

Best Practices

Column Sizing: Explicitly set column sizes for important columns to prevent layout shifts
Pagination: Enable pagination for tables with more than 20 rows
Export Options: Provide export functionality for data that users may need offline
Custom Cells: Use the Cell property for formatted data (dates, status badges, actions)
Mobile Optimization: Test tables on mobile devices and adjust density/column visibility
Performance: For large datasets (>1000 rows), consider server-side pagination
Accessibility: Ensure custom cell renderers maintain proper contrast and keyboard navigation

Chart Types

UI Components

Overview

Import

Props

Feature Configuration Props

Export Props

Styling Props

Advanced Props

Usage Examples

Basic Table

Table with Excel and PDF Export

Table with Custom Cell Rendering

Table with Grouped Columns

Table with Row Selection

Compact Mobile Table

Common Use Cases

Component Source

Empty State

Export Functionality

Excel Export

PDF Export

Styling Features

Alternating Row Colors

Conditional Row Highlighting

Localization

Best Practices

Build docs developers (and LLMs) love

Chart Types

UI Components

Documentation Index

​Overview

​Import

​Props

​Feature Configuration Props

​Export Props

​Styling Props

​Advanced Props

​Usage Examples

​Basic Table

​Paginated Table with Toolbar

​Table with Excel and PDF Export

​Table with Custom Cell Rendering

​Table with Grouped Columns

​Table with Row Selection

​Compact Mobile Table

​Common Use Cases

​Component Source

​Empty State

​Export Functionality

​Excel Export

​PDF Export

​Styling Features

​Alternating Row Colors

​Conditional Row Highlighting

​Localization

​Best Practices

Build docs developers (and LLMs) love

Overview

Import

Props

Feature Configuration Props

Export Props

Styling Props

Advanced Props

Usage Examples

Basic Table

Paginated Table with Toolbar

Table with Excel and PDF Export

Table with Custom Cell Rendering

Table with Grouped Columns

Table with Row Selection

Compact Mobile Table

Common Use Cases

Component Source

Empty State

Export Functionality

Excel Export

PDF Export

Styling Features

Alternating Row Colors

Conditional Row Highlighting

Localization

Best Practices