How to Initially Hide the "Show/Hide Columns" Button in Material React Table

The "Show/Hide Columns" button in Material React Table (MRT) is a useful feature for managing table visibility. However, there are scenarios where you may want to hide this button to maintain a cleaner user interface or follow specific design requirements.

This guide will show you how to hide the "Show/Hide Columns" button using configuration props and customization options in Material React Table.

Solution 1: Use the enableHiding Prop

The simplest way to remove the "Show/Hide Columns" button is to set the enableHiding prop to false in the table configuration.

Example:

import React from 'react'
import MaterialReactTable from 'material-react-table'

const Example = () => {
  const columns = [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'age',
      header: 'Age',
    },
  ]

  const data = [
    { name: 'John Doe', age: 28 },
    { name: 'Jane Smith', age: 34 },
  ]

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      enableHiding={false} // Hides the "Show/Hide Columns" button
    />
  )
}

export default Example

Result:

The "Show/Hide Columns" button is no longer visible in the table’s toolbar.

Solution 2: Customize the Toolbar Actions

If you want more granular control over the toolbar actions, you can override the default behavior by customizing the renderToolbarInternalActions method.

Example:

import React from 'react'
import MaterialReactTable from 'material-react-table'
import { Box } from '@mui/material'

const Example = () => {
  const columns = [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'age',
      header: 'Age',
    },
  ]

  const data = [
    { name: 'John Doe', age: 28 },
    { name: 'Jane Smith', age: 34 },
  ]

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      renderToolbarInternalActions={({ table }) => (
        <Box>{/* Customize toolbar buttons here */}</Box>
      )}
    />
  )
}

export default Example

Explanation:

• renderToolbarInternalActions: Replaces the default toolbar buttons with your custom actions.
• Custom Buttons: You can selectively add or remove buttons like MRT_ToggleFiltersButton, MRT_ToggleDensePaddingButton, etc., based on your requirements.

Solution 3: Hide Multiple Default Buttons

To hide not just the "Show/Hide Columns" button but also other default toolbar buttons, you can disable their respective props:

Example:

import React from 'react'
import MaterialReactTable from 'material-react-table'

const Example = () => {
  const columns = [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'age',
      header: 'Age',
    },
  ]

  const data = [
    { name: 'John Doe', age: 28 },
    { name: 'Jane Smith', age: 34 },
  ]

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      enableHiding={false} // Disable column hiding
      enableGlobalFilter={false} // Disable global search
      enableFullScreenToggle={false} // Disable full-screen toggle
      enableDensityToggle={false} // Disable density toggle
    />
  )
}

export default Example

Result:

All specified toolbar buttons are hidden, creating a minimalist toolbar layout.

Key Considerations

1. Use Case Specificity: Decide whether you want to hide only the "Show/Hide Columns" button or other toolbar actions as well.
2. Accessibility: Ensure that hiding toolbar buttons does not negatively impact the user’s ability to interact with the table.
3. Customization: The renderToolbarInternalActions method offers the most flexibility for custom layouts and actions.

Conclusion

Hiding the "Show/Hide Columns" button in Material React Table is straightforward with the enableHiding prop or by customizing the toolbar actions. Depending on your project requirements, you can implement a minimalist toolbar or design a fully customized one.

Key Takeaways

• Use enableHiding={false} to quickly remove the "Show/Hide Columns" button.
• Customize the toolbar with renderToolbarInternalActions for greater control.
• Disable multiple buttons to simplify the table interface.

With these techniques, you can tailor Material React Table to fit your application’s design and functionality needs.