[data grid] isLastColumn parameter is not set to true for last column when disableVirtualization={true}

[Tucker-Gilligan]

Steps to reproduce

Link to live example: (required)

Steps:

1. set prop disableVirtualization={true} and add column grouping through columnGroupingModel prop
2. subscribe custom event handler to columnGroupHeaderKeyDown event

const handleColumnGroupHeaderKeyDown: GridEventListener<'columnGroupHeaderKeyDown'> = (params, event) => {
  console.log({ params });
}

useEffect(() => {
    const columnGroupHeaderKeyDown = apiRef?.current?.subscribeEvent('columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
    return () => {
      columnGroupHeaderKeyDown();
    }
  }, [apiRef]);

4. trigger keydown event on last grouping column and check console.log
   params.isLastColumn=false (should be true)

Current behavior

current behavior when triggering columnGroupHeaderKeyDown event, isLastColumn is evaluating to false

Expected behavior

isLastColumn should evaluate to true when keydown event is triggered on last column group header

Context

I am trying to use this variable as a flag for custom keydown behavior when the event is triggered on the last columnGroupingHeader in the grid

There are instances when the keyboard focus is on the last columnGroupingHeader, but the grid does not scroll all the way to the end to show all child headers. As a workaround, i am trying to trigger grid scroll when user presses "ArrowRight" key on the last columnGroupingHeader

something like this is what i'd like to do, or if you can fix internally that would be cool too

const handleColumnGroupHeaderKeyDown: GridEventListener<'columnGroupHeaderKeyDown'> = (params) => {
  const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller') as HTMLElement;
  if (event.key === 'ArrowRight') {
    if (params.isLastColumn) {
      virtualScroller.scrollBy({ left: 12 });
    }
  }
}

Your environment

npx @mui/envinfo

TESTED ON GOOGLE CHROME

  System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 132.97 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Managers:
    Homebrew: 4.2.19 - /opt/homebrew/bin/brew
    pip3: 21.2.4 - /usr/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 15.0.0 - /usr/bin/gcc
    Git: 2.39.3 - /usr/bin/git
    Clang: 15.0.0 - /usr/bin/clang
    Curl: 8.4.0 - /usr/bin/curl
  Servers:
    Apache: 2.4.58 - /usr/sbin/apachectl
  Virtualization:
    Docker: 25.0.3 - /usr/local/bin/docker
    Docker Compose: 2.24.6 - /usr/local/bin/docker-compose
  IDEs:
    VSCode: 1.89.0 - /usr/local/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.34.1 - /usr/bin/perl
    Python3: 3.9.6 - /usr/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Chrome: 124.0.6367.158
    Safari: 17.4.1

Search keywords: isLastColumn, disableVirtualization, columnGroupHeaderKeyDown
Order ID: 48138

[michelengelen]

Hey @Tucker-Gilligan
It does work for me.
See this example. It will trigger once you actually trigger the keydown event on the grouped header, not when it receives focus.

The focus event is also showcased in that demo I linked above, so that would be your point of entry for handling such use cases

Let me know what you think! 👍🏼

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.