CODEWITHSUNDEEP
reactjsmaterial-tablematerial-react-table
Martin
Martin

Reputation: 1578

how to hide all table options for react material table?

I am trying to create a table in react.js. I have decided to use the react material table library, and so far it works good, except for the table takes up way too much space. I am trying to give it some custom more minimal style so that it takes up as little space as possible.

The things that take up the most space are these buttons in the top right corner: enter image description here

here is my code which creates the table: https://codesandbox.io/p/sandbox/reverent-mestorf-3kekx7?welcome=true

How can I style it to be as minimal as possible? Firstly by removing all the buttons in my red box. Thanks.

import React, { useMemo } from 'react';
import MaterialReactTable, { type MRT_ColumnDef } from 'material-react-table';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      //column definitions...
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
      {
        accessorKey: 'state',
        header: 'State',
      },
      //end
    ],

    [],
  );

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      enableRowNumbers
      rowNumberMode="static"
    />
  );
};

export default Example;

Upvotes: 0

Views: 802

Answers (1)

Gary B
Gary B

Reputation: 218

You can pass in the prop enableTopToolbar with a value of false

For example:

<MaterialReactTable
  columns={columns}
  data={data}
  enableRowNumbers
  rowNumberMode="static"
  enableTopToolbar={false}
/>

Upvotes: 0

Related Questions