elastic / elastic/eui

[EuiBasicTable] Migrate from class to function component

Open
#9,476 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

`EuiBasicTable` is the core table component in EUI, supporting sorting, pagination, selection, actions, and responsive layouts. Highlighted as one of the most widely used EUI components.

- **File:** `components/basic_table/basic_table.tsx`
- **Class size:** 694 lines
- **State:** `initialSelectionRendered`, `selection`
- **Lifecycle:** `getDerivedStateFromProps`, `componentDidMount`, `componentDidUpdate`

**Migration notes:**

Large component with `getDerivedStateFromProps` for selection state sync. The derived state pattern needs careful conversion — likely requires `useEffect` with proper dependency tracking or controlled component refactor. High test coverage expected given its prominence.

**Acceptance criteria:**

- [ ] Convert to function component with hooks
- [ ] Carefully handle `getDerivedStateFromProps` → state sync pattern
- [ ] Maintain all sorting, pagination, selection, and action behaviors
- [ ] All existing tests pass
- [ ] Manual verification of table interactions (select all, sort, paginate)
- [ ] Carefully smoke-tested in Kibana

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.