I implemented an MUI-DATABLE and I would like to style it but I don't know-how.

What I want to style is the bubbles that appear when you use filters and on top of the table as per the screenshot are gray and I would like to have the power to style them with my design

I implemented an MUI-DATABLE and I would like to style it but I don't know-how.

What I want to style is the bubbles that appear when you use filters and on top of the table as per the screenshot are gray and I would like to have the power to style them with my design

• javascript
• reactjs
• mui-datatable

Share Improve this question Follow edited Mar 27 at 11:50 Olivier Tassinari 8,69066 gold badges2525 silver badges2828 bronze badges asked Dec 15, 2020 at 15:31 JakubJakub 2,73988 gold badges4545 silver badges104104 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Alter the color of the filter chip

If you are only looking to alter the color, according to the MUI Datatables docs, one can acplish this by using theme overrides. To do this, you can follow the example on the MUI Datatables docs or you can view this Code Sandbox for a live example. The code can be set up like this:

import React from "react";
import MUIDataTable from "mui-datatables";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";


export default function App() {
  // Here, we use createMUITheme to apply the custom styles to 
  // the filter chip with an override on the MuiChip-root class:
  const getMuiTheme = () =>
    createMuiTheme({
      overrides: {
        MuiChip: {
          root: {
            backgroundColor: "lightgrey"
          }
        }
      }
    });

  const columns = [
    {
      name: "name",
      label: "Name",
      options: {
        filter: true,
        sort: true
      }
    },
    {
      name: "pany",
      label: "Company",
      options: {
        filter: true,
        sort: false
      }
    },
    {
      name: "city",
      label: "City",
      options: {
        filter: true,
        sort: false
      }
    },
    {
      name: "state",
      label: "State",
      options: {
        filter: true,
        sort: false
      }
    }
  ];

  const data = [
    { name: "Joe James", pany: "Test Corp", city: "Yonkers", state: "NY" },
    { name: "John Walsh", pany: "Test Corp", city: "Hartford", state: "CT" },
    { name: "Bob Herm", pany: "Test Corp", city: "Tampa", state: "FL" },
    { name: "James Houston", pany: "Test Corp", city: "Dallas", state: "TX" }
  ];

  const options = {
    filterType: "checkbox"
  };

  // Now, we wrap the MUI Datatable in the MUIThemeProvider to apply
  // the styles:
  return (
    <MuiThemeProvider theme={getMuiTheme()}>
      <MUIDataTable columns={columns} data={data} options={options} />
    </MuiThemeProvider>
  );
}

---

Custom Filter Chip

If what you want to do is to use a custom filter chip ponent rather than the default grey filter chips, you can pass a custom filter chip ponent to a custom filter list ponent. Then, you would pass that filter list ponent to the table's ponents prop like so:

import React from "react";
import "./styles.css";
// Import the chip ponent frfom Material UI or a 
// custom ponent of your choosing:
import Chip from '@material-ui/core/Chip';
// Import the TableFilterList from mui-datatables:
import MUIDataTable, { TableFilterList } from "mui-datatables";

// Here is the custom chip ponent. For this example, we are 
// using the outlined chip from Material UI:
const CustomChip = ({ label, onDelete }) => {
  return (
      <Chip
          variant="outlined"
          color="secondary"
          label={label}
          onDelete={onDelete}
      />
  );
};

// Here is the custom filter list ponent that will display
// the custom filter chips:
const CustomFilterList = (props) => {
  return <TableFilterList {...props} ItemComponent={CustomChip} />;
};


export default function App() {
  const columns = [
    {
      name: "name",
      label: "Name",
      options: {
        filter: true,
        sort: true
      }
    },
    {
      name: "pany",
      label: "Company",
      options: {
        filter: true,
        sort: false
      }
    },
    {
      name: "city",
      label: "City",
      options: {
        filter: true,
        sort: false
      }
    },
    {
      name: "state",
      label: "State",
      options: {
        filter: true,
        sort: false
      }
    }
  ];

  const data = [
    { name: "Joe James", pany: "Test Corp", city: "Yonkers", state: "NY" },
    { name: "John Walsh", pany: "Test Corp", city: "Hartford", state: "CT" },
    { name: "Bob Herm", pany: "Test Corp", city: "Tampa", state: "FL" },
    { name: "James Houston", pany: "Test Corp", city: "Dallas", state: "TX" }
  ];

  const options = {
    filterType: "checkbox"
  };

  // Finally, we pass the CustomFilterList to the table's ponents
  // prop:  
  return (
    <div className="App">
      <MUIDataTable
        title={"Employee List"}
        data={data}
        columns={columns}
        options={options}
        ponents={{
          TableFilterList: CustomFilterList,
        }}
      />
    </div>
  );
}

Again, this example is taken from the MUI Datatables docs and I have a live example in this Code Sandbox.

A solution could be to be very specific with your selectors in your CSS. This would be something like:

mui-datatable > header > bubbles > .someClassMadeByMuiDatatable {}

As a tip, you can use the inspector in Google Chrome, select the bubbles in the tree structure (HTML), and copy the selector.

General reading about specificity in CSS can be found in https://developer.mozilla/en-US/docs/Web/CSS/Specificity

It looks like there is a built in option in the table config to do this.

From this example in the docs.

https://github./gregnb/mui-datatables/blob/master/examples/customize-filter/index.js

setFilterChipProps: (colIndex, colName, data) => {
        //console.log(colIndex, colName, data);
        return {
          color: 'primary',
          variant: 'outlined',
          className: 'testClass123',
        };
      }