Skip to content

[EuiDataGrid] - Column row sorting doesnt work when using visibleRowIndex instead of rowIndex in RenderCellValue function #9081

@xulucreatives

Description

@xulucreatives

Describe the bug
I have an API that fetches 10 records at a time and returns a totalRecordCount (used for pagination). Because of this setup, I need to ensure my data index range always stays between 0–9 for each page.

In RenderCellValue, I’m forced to use visibleRowIndex instead of rowIndex to achieve this — however, when I do, the sorting functionality completely breaks.

Example

✅ This works (uses rowIndex)

const renderCellValue = useMemo(() => {
  return ({ rowIndex, columnId }) => {
    return raw_data.hasOwnProperty(rowIndex)
      ? raw_data[rowIndex][columnId]
      : null;
  };
}, []);

❌ This doesn’t work (uses visibleRowIndex)

  const renderCellValue = useMemo(() => {
    return ({ visibleRowIndex, columnId }) => {
      return raw_data.hasOwnProperty(visibleRowIndex)
        ? raw_data[visibleRowIndex][columnId]
        : null;
    };
  }, []);

Component
<EuiDataGrid
  aria-label="inMemory level set to sorting data grid demo"
  columns={columns}
  columnVisibility={{ visibleColumns, setVisibleColumns }}
  rowCount={totalRecordCount} //lets assume this is equal to 500
  renderCellValue={renderCellValue}
  inMemory={{ level: 'sorting' }}
  sorting={{ columns: sortingColumns, onSort }}
  pagination={{
    ...pagination,
    onChangeItemsPerPage: onChangeItemsPerPage,
    onChangePage: onChangePage,
  }}
/>

Impact and severity
Very high — users are unable to sort fields properly when using visibleRowIndex.

Environment and versions

  • EUI version: v95.11.0 (might be also affecting latest version)
  • React version: v20
  • Kibana version (if applicable):
  • Browser: ALL
  • Operating System: Windows

Minimum reproducible sandbox

To Reproduce

✅ Works (uses rowIndex):

  const renderCellValue = useMemo(() => {
    return ({ rowIndex, columnId }) => {
      return raw_data.hasOwnProperty(rowIndex)
        ? raw_data[rowIndex][columnId]
        : null;
    };
  }, []);

❌ Doesn’t work (uses visibleRowIndex):

  const renderCellValue = useMemo(() => {
    return ({ visibleRowIndex, columnId }) => {
      return raw_data.hasOwnProperty(visibleRowIndex)
        ? raw_data[visibleRowIndex][columnId]
        : null;
    };
  }, []);

Expected behavior
Sorting should work correctly (A–Z or Z–A) depending on the schema type — but when using visibleRowIndex, no sorting occurs at all.

Screenshots (Optional)
So like I said when using visibleRowIndex this 👇 doesnt sort the fields

Image

Additional context (Optional)

Metadata

Metadata

Assignees

Labels

⚠️ needs validationFor bugs that need confirmation as to whether they're reproducible

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions