How to style in MUI-Datatables the filter chip on top of the table

Question

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

Answer 1

Alter the color of the filter chip

If you are only looking to alter the color, according to the MUI Datatables docs , one can accomplish 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: "company",
      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", company: "Test Corp", city: "Yonkers", state: "NY" },
    { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
    { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
    { name: "James Houston", company: "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 component rather than the default grey filter chips, you can pass a custom filter chip component to a custom filter list component. Then, you would pass that filter list component to the table's components prop like so:

import React from "react";
import "./styles.css";
// Import the chip component frfom Material UI or a 
// custom component 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 component. 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 component 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: "company",
      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", company: "Test Corp", city: "Yonkers", state: "NY" },
    { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
    { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
    { name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" }
  ];

  const options = {
    filterType: "checkbox"
  };

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

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

Answer 2

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.org/en-US/docs/Web/CSS/Specificity

Answer 3

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

From this example in the docs.

https://github.com/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',
        };
      }