Quick Answer

Question Short Answer
How do you render a React component in Material React Table? Use the column Cell property and return your custom JSX component.
Why does Material React Table show plain text? Because it renders accessor values by default unless a custom renderer is provided.
How do you display badges in Material React Table? Create a badge component and call it inside the column Cell function.

Why am I getting this problem?

By default, Material React Table renders the value returned by your column accessor as plain content. If you try to pass complex JSX, objects, buttons, badges, or custom React components directly into a cell without defining how the table should display them, the output may not appear as expected.

For example, objects can display as [Object Object], while JSX components may be ignored because Material React Table does not automatically know how to render custom UI elements inside a column.

This happens because the table separates data access from cell presentation. The accessorKey retrieves your raw data, but a custom Cell renderer controls how that data should appear visually.

Solution

To render custom UI components inside Material React Table cells, you need to:

  • Create your custom React component.
  • Add the component inside the column definition using the Cell property.
  • Pass the required cell value or row data to your component.
  • Render the table using the updated column configuration.

Below is a beginner-friendly example using a status badge.

1. Create your custom component

First, create a reusable component that receives the status value and displays a styled badge.

// StatusBadge.jsx
import 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>

  );

}

This component accepts the status value as a prop and dynamically changes the badge appearance based on the data.

2. Define columns with a Cell renderer

Now connect the custom component with your Material React Table column configuration.

// columns.js

import React from "react";

import StatusBadge from "./StatusBadge";

export const columns = [

  {

    accessorKey: "id",

    header: "ID",

  },

  {

    accessorKey: "name",

    header: "Name",

  },

  {

    accessorKey: "status",

    header: "Status",

    // Render custom component inside the cell

    Cell: ({ cell }) => (

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

    ),

  },

];

Here, cell.getValue() returns the original value from your data source, such as “Active” or “Inactive”. That value is then passed into the StatusBadge component for custom rendering.

The same approach can be used for:

  • Action buttons
  • Profile images
  • Icons
  • Progress indicators
  • Custom dropdowns
  • Form controls
  • Interactive elements

Also Read: Cross-Platform Development in ReactJS

3. Render the table with custom columns

Once the columns are configured, pass them into the Material React Table along with your data.

// App.jsx

import React, { useMemo } from "react";

import MaterialReactTable from "material-react-table";

import { columns } from "./columns";

import { rowData } from "./data";

export default function App() {

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

  return (

    <MaterialReactTable

      columns={memoColumns}

      data={rowData}

      enableColumnFilters={false}

      enableSorting={true}

    />

  );

}

The table will now use your custom badge component instead of displaying the default text value in the Status column.

Code Breakdown

  • StatusBadge:
    A reusable React component that receives data from the table and converts a normal status value into a styled visual indicator.
  • Cell renderer:
    The Cell property replaces Material React Table’s default text rendering and allows you to return custom JSX or React components.
  • cell.getValue():
    Retrieves the original value connected to the current cell and passes it into your custom component.
  • useMemo:
    Prevents unnecessary column recreation during component re-renders, improving table performance.

When Should You Use Material React Table Cell Renderers?

Use Material React Table cell renderers when default text output is not enough. Custom renderers help display dynamic UI elements, formatted data, and interactive components inside table columns.

Use Case Recommended Approach
Status labels Create badge components
User profiles Render avatar and user details
Action columns Add buttons using Cell
Date formatting Transform values before displaying
Currency formatting Apply custom formatting logic
Progress tracking Use visual indicators

Key takeaways

  • Use the column’s Cell property to render custom JSX inside Material React Table.
  • Do not pass complex UI components directly as data values.
  • Use cell.getValue() to access and reuse the original cell data.
  • Keep column definitions memoized to reduce unnecessary renders.
  • Separate data handling from UI presentation for cleaner React table architecture.