hey guys! I am not able to style the input fields within the GridFilterColumn

I have tried several options including :

Is this a Hilla app? Could you share how you define the Grid?

<GridFilterColumn path=‘name’ style={{ whiteSpace: ‘normal’, border: ‘1px solid #cfcfcf’ }} header=“Name” flexGrow={0} width=“230px” resizable />

    </Grid> this way i defined the grid with react. Here i want to style the filter textfield and also want to add placeholder in it.

I want to style the color of vaadin-grid-filter label and also want to add placeholder to vaadin-grid-filter text-field.Please help me.

To target the input field you can do something like

vaadin-grid-filter vaadin-text-field input {
    color: red;

Thank you so much sir.Its working😍. And also i want to set Placeholder in the above vaadin-grid-filter vaadin-text-field input.How can i do that?

You can define a custom header renderer for the filter like this:

import { Grid } from "@hilla/react-components/Grid";
import { GridFilter } from "@hilla/react-components/GridFilter";
import { TextField } from "@hilla/react-components/TextField";
import { GridColumn } from "@hilla/react-components/GridColumn";

function NameFilterRenderer() {
  return (
    <GridFilter path='name'>
      <TextField label="Filter by name" theme="small" placeholder="Filter..." />

<Grid items={items}>
  <GridColumn path="name" headerRenderer={NameFilterRenderer}/>

Note that it’s using GridColumn instead of GridFilterColumn.

Thank you soo much sir❤️

Iam facing an issue that, when i use the css vaadin-grid::part(row):hover the whole rows are hovering.I dont want to hover the Header.Only want to hover body rows.