Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

docs: ADR with handling tables (#5561)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-12-13 11:09:55 +01:00 committed by GitHub
parent 92dd3feec2
commit e32fa396fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
website/docs/contributing/ADRs/front-end/handling-tables.md Normal file
View File

@ -0,0 +1,43 @@
---
title: "ADR: Handling tables"
---
## Background
We need to handle table state on different pages. Some pages do client side table handling while some other need to offload some work to the server.
Two most critical pages that we migrate to server handling are the Feature Flags page and Project Overview page.
[Table handling options](/img/handling-tables-adr.png)
Table handling consists of 4 parts:
* API call and **server side data handling**
* persistent table state in URL and localStorage (handled by the usePerisistentTableState hook)
* column definitions and **client side data handling** (handled either by react-table or custom code)
* Material-UI rendering components
Data handling consists of:
* sorting (either server or client side)
* pagination (either server or client side)
* searching (either server or client side)
* filtering (either server or client side)
* column visibility (only client side)
* row selection (only client side)
### Options
For pages with no server data handling we need `react-table` for client side data handling.
For pages with server data handling we considered two options that we implemented in a spike:
* not using `react-table` and writing minimal custom code for column visibility, data mapping and row selection.
Not much else is required since server side is doing sorting/pagination/searching/filtering
* using `react-table` with the extra cost of the library magic and writing connectors from backend data to `react-table` structures
The tradeoff is between simplicity of the pages that support server side data handling and the consistency
between the definitions of the client side and server side powered tables.
## Decision
We have decided to **favor consistency over one-off simplicity**.
Using `react-table` comes at a cost but allows to change between client and server side data handling with lesser effort. It allows to revert decisions to client side and makes the migration
to server side data handling easier.

BIN
website/static/img/handling-tables-adr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 416 KiB