Why am I getting this problem?

By default, Material React Table renders plain text for each cell based on your data accessor. If you supply complex JSX or a custom component without telling the table how to render it (via the column’s Cell renderer), the table will either show [Object Object] or ignore your component altogether.

Solution

You need to:

  1. Create your custom React component.
  2. Pass it into the column definition via the Cell property.
  3. Render the table with those columns so the table knows to use your component instead of text.

Below is a beginner‑friendly, step‑by‑step example using a status badge.

1. Create your custom component

This component renders a color‑coded badge based on each row’s status.

// StatusBadge.jsximport React from ‘react’;

export default function StatusBadge({ status }) {

  const color = status === ‘Active’ ? ‘green’ : ‘gray’;

  return (

    <span

      style={{

        backgroundColor: color,

        color: ‘white’,

        padding: ‘4px 8px’,

        borderRadius: ’12px’,

        fontSize: ‘0.8rem’,

      }}

    >

      {status}

    </span>

  );

}

2. Define columns with a Cell renderer

Here we tell Material React Table to use that badge component inside the Status column.

// columns.jsimport React from ‘react’;

import StatusBadge from ‘./StatusBadge’;

 

export const columns = [

  { accessorKey: ‘id’, header: ‘ID’ },

  { accessorKey: ‘name’, header: ‘Name’ },

  {

    accessorKey: ‘status’,

    header: ‘Status’,

    // Tell MRT to render our StatusBadge component

    Cell: ({ cell }) => <StatusBadge status={cell.getValue()} />,

  },

];

Here, cell.getValue() returns the raw status string (e.g. ‘Active‘), which we pass to our badge component.

Also Read: Cross-Platform Development in ReactJS

3. Render the table with custom columns

Now load your memoized columns and data into Material React Table for a polished table view.

// App.jsximport React, { useMemo } from ‘react’;

import MaterialReactTable from ‘material-react-table’;

import { columns } from ‘./columns’;

import { rowData } from ‘./data’; // your data array

 

export default function App() {

  const memoColumns = useMemo(() => columns, []);

  return (

    <MaterialReactTable

      columns={memoColumns}

      data={rowData}

      enableColumnFilters={false}

      enableSorting={true}

    />

  );

}

The table will now render your colored badge instead of plain text in the Status column.

Code Breakdown

  • StatusBadge: A simple component that styles a <span> based on status.
  • Cell renderer: Replaces default text with <StatusBadge status={…} />.
  • useMemo: Ensures columns aren’t recreated on each render, optimizing performance.

Key takeaways

  • Use the column’s Cell property to inject custom JSX or components.
  • Always pass the cell value via cell.getValue().
  • Memoize your columns to prevent unnecessary re‑renders.