CODEWITHSUNDEEP
javascriptreactjsmui-datatable
Jakub
Jakub

Reputation: 2709

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

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 filter bubbles

Upvotes: 1

Views: 7933

Answers (3)

Pasha Skender
Pasha Skender

Reputation: 417

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',
        };
      }

Upvotes: 0

jharris711
jharris711

Reputation: 612

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 in this Code Sandbox.

Upvotes: 3

Christian Futtrup
Christian Futtrup

Reputation: 172

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

Upvotes: 0

Related Questions