Manat Singh Brar
← All work

Row 04 of 07

One table, 66 screens

Area
Design system
Level
Intern, Engineer
Result
Used on 66 screens
Stack
React · TypeScript · Memoization · Server-side pagination · Saved views · CSV export

Main author of the shared data table used by 66 screens of the console. I wrote 64% of its code.

66Each cell is one screen of the console that renders the shared table.

Context

Analysts spend their day in tables, so in a security console the table is the product. As an intern I added column ordering and show and hide to the shared table. Over the next three years I became its main author.

What I did

Columns size themselves from their content, so no developer guesses a width. Analysts reorder, pin, hide and search columns, expand any row for detail, filter and page on the server, export to CSV, and save the whole arrangement as a view that loads next time.

Memoization stopped the whole table re-rendering when a single row is selected.

Outcome

66 screens use it. I wrote 64% of its code, and four other engineers have adopted it in their own features. The table on this site’s home page borrows its manners.