elastic / elastic/eui

[Beta] EuiDataGrid rowHeightsOptions.autoBelowLineCount functionality

Open
#8,456 0 comments 0 reactions 0 assignees View on GitHub
beta data grid meta
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 10h
Merged PRs (30d)
74

Description

`rowHeightsOptions.autoBelowLineCount` functionality stems from a feature request: https://github.com/elastic/eui/issues/7835. It has been introduced on https://github.com/elastic/eui/pull/8096. It's in beta status to verify whether it contains performance issues or other bugs (see discussion in https://github.com/elastic/eui/issues/7835 and various bug reports around auto height grids). The purpose of this task is to track the beta feature, analyze the usage and group improvements to the functionality to assure its usability and stability.

> [!IMPORTANT]
> This beta status can be removed if Discover is able to use this feature extensively in production without major user issues for an extended period of time.

![Image](https://github.com/user-attachments/assets/5a4a4b0e-855a-4089-818b-96a1a33e6f3f)

## Feature description

`rowHeightsOptions.autoBelowLineCount` feature flag enables custom `lineCount` behavior, where `lineCount` acts like a max number of lines instead of a set number of lines for all rows.

## Usage notes

There is no usage in the whole Kibana repository.

### Discover

Discover doesn't use `rowHeightsOptions.autoBelowLineCount` at the moment because it doesn't cover the full extent of the required functionality.

**EuiDataGrid usage:** `src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx`
**Custom row heights options hook:** `src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_heights_options.ts`
**Custom row height count hook:** `src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_height.ts`
**Custom toolbar:** `src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx` (usage in the first file, line 1035 `renderCustomToolbarFn`)

## Goal

As part of this ticket we should analyze the differences between the current implementation and functionality scope and **the desired functionality scope**. We can analyze the differences between **our implementation and Discover team implementation**. Additionally, we should **plan tasks** to arrive at a feature parity and assure functional stability and fair usage.

Contributor guide

Open the contributing guide

Research direction

Start by reading the EuiDataGrid usage in src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx and the related hooks use_row_heights_options.ts and use_row_height.ts. Compare this implementation with the beta feature, the Discover implementation, and issues 7835 and 8096; done means documenting the differences and planning tasks for feature parity and stability.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.