Material-ui how to make the search textfield expandable in material-table

Question

I'm using material-table and I want to make the search text field expandable like in this example. But I can't figure out how to change the style for that text field.

My table

I've tried something like this but is not working..

options={{
                searchFieldStyle: {
                    padding: theme.spacing(1, 1, 1, 0),
                    // vertical padding + font size from searchIcon
                    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
                    transition: theme.transitions.create('width'),
                    width: '100%',
                    [theme.breakpoints.up('sm')]: {
                        width: '12ch',
                        '&:focus': {
                            width: '20ch',
                        },
                    },
                }
            }}

Also, how can I wrap the title of the table if I'm using the mobile website? — Tudor Ciobanu

Sabbin Sabbin · Accepted Answer · 2020-04-06T11:37:36

The searchFieldStyle parameter is ok inside the MaterialTable options.

Now due to the fact that you did not supply the whole code I cannot assume that you imported the theme correctly in your component. In the future please provide the amount of code for a minimum working variant, adding a working sandbox/fiddle will be better.

The theme can be used in a component using the useTheme hook from Material-UI read more HERE

import { useTheme } from "@material-ui/core/styles";

....

const theme = useTheme();

Now when you pass the style to the searchComponent of the MaterialTable you cannot use style and breakPoints as in JSS this is inline CSS.

So in order to use media queries you need to use the useMediaQuery hook, read more HERE

Also to make the styles based on breaking points it's better if we create a separate variable for the styles.

import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useTheme } from "@material-ui/core/styles";

....

const theme = useTheme();
const smUp = useMediaQuery(theme.breakpoints.up("sm"));

let customStyle = {
  padding: theme.spacing(1, 1, 1, 0),
  // vertical padding + font size from searchIcon
  paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
  transition: theme.transitions.create("width"),
  width: "100%"
};

if (smUp) {
  customStyle = {
    ...customStyle,
    width: "24ch",
    color: "red",
    }
  };
}

...

options={{
    ...
    searchFieldStyle: customStyle,
}}

As you can see the breaking point rule theme.breakpoints.up("sm") with the useMediaQuery and modify the customStyle variable.

The one thing that you cannot do is the pseudo :focus as React does not support inline css pseudo elements.

Also even if you achieve putting the focus there it will do you no good, due to the fact that the searchFieldStyle styles the parent div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd". If you focus on the actual input element will no trigger the focus on your Mui-Root container

I've also created a working sandbox that you can check HERE

The only viable solution if you want to use transition is to create your own input, override the <ToolbarComponent> as shown HERE in the example. After that create your own filter function for the data and pass it to the table

Material-ui how to make the search textfield expandable in material-table

1 Answers