[data grid] The search field of the new Columns Management has a start adornment which is not possible to override

[mike-paretos]

The problem in depth

We are doing the migration to DataGrid v7 and are not able to achieve the same styles that we had in v6.

The search field of the new columnsManagement has a startAdornment which is not possible to override without affecting all text fields. The field itself has the type 'text' instead of 'search'

Your environment

`npx @mui/envinfo`

 System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1
    Memory: 90.73 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 8.12.1 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Managers:
    Homebrew: 4.1.17 - /opt/homebrew/bin/brew
    pip3: 23.1.2 - /opt/homebrew/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 16.0.0 - /usr/bin/gcc
    Git: 2.39.5 - /usr/bin/git
    Clang: 16.0.0 - /usr/bin/clang
    Curl: 8.7.1 - /usr/bin/curl
    OpenSSL: 3.3.6 - /usr/bin/openssl
  Servers:
    Apache: 2.4.59 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.17 - /usr/local/bin/docker
    Docker Compose: 1.29.2 - /usr/local/bin/docker-compose
  IDEs:
    Vim: 9.0 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 18.0.2.1 - /usr/bin/javac
    Perl: 5.34.1 - /usr/bin/perl
    Python: 3.9.6 - /usr/local/bin/python
    Python3: 3.11.3 - /opt/homebrew/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    PostgreSQL: 14.7 - /opt/homebrew/bin/postgres
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Chrome: 129.0.6668.101
    Safari: 18.0

Search keywords: columnsManagement, Columns Management, startAdornment
Order ID: 82474

[romgrk]

Many of the changes in v7 were performance improvements. If you have a reproducible case for a performance regression I'll take a look, please open a separate issue with all the details.

[KenanYusuf]

1. It is not possible to achieve shadow on the pinned columns. There are no recipes on how to achieve the previous behavior.

This was removed during a big refactor, but we plan on adding it back in at some point. We have an issue already to track this #10001

2. The search field of the new columnsManagement has a startAdornment which is not possible to override without affecting the all text fields. The field itself has the type 'text' instead of 'search'

This feels like something we can improve with fairly low effort. Given points 1 and 3 are issues that can be dealt with separately, @mike-paretos if you would like to update the issue title and description to just be about point 2, we can action the changes against this issue.

[mike-paretos]

@KenanYusuf Thanks, I have updated issue title&description

[alisasanib]

Hi @KenanYusuf , I'd like to work on this issue. Can you please share your thoughts on the improvement here? I think we probably need to support startAdornment as a property similar to the Input component?

[KenanYusuf]

Hey @alisasanib, thanks for your willingness to help on this issue.

I think we want to extend GridColumnsManagementProps to take search input props. We could do something like:

export interface GridColumnsManagementProps {
  searchInput?: Partial<TextFieldProps>;
}

And then pass those props to the search input which gets rendered here:
https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx#L214-L231

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mike-paretos How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.