avatarFrontend Jirachi

Summary

This article discusses the design of a data table component for frontend system design interviews, covering functional and non-functional requirements, API/Dataflow, component architecture, UI state & props, performance improvements, internationalization, mobile support, and accessibility.

Abstract

The author of this article is starting a series to practice frontend system design interview questions, with the first article focusing on designing a data table component. The article covers various aspects of designing a data table, including functional requirements such as having a header, configurable columns, selectable rows, and optional features like filtering and pagination. Non-functional requirements include avoiding unnecessary re-renders, supporting accessibility and internationalization, and having cross-device support. The article also discusses API/Dataflow, component architecture, UI state & props, performance improvements, internationalization, mobile support, and accessibility considerations.

Opinions

  • The author emphasizes the importance of considering both functional and non-functional requirements when designing a data table component.
  • The article highlights the need for a data table to be configurable, allowing for customization of columns, rows, and other features.
  • The author suggests using event delegation as a performance improvement technique for data table components.
  • The article discusses the importance of internationalization and accessibility in data table design, providing examples of how to implement these features.
  • The author suggests using a different design for mobile devices, such as a horizontal table on desktop becoming a vertical table on mobile.
  • The article mentions the use of table markup and the scope attribute to improve accessibility in data tables.
  • The author encourages readers to provide feedback and engage in discussion about the content of the article.

Design a Data Table Component | FrontEnd System Design Interview

I’m starting a series to practice the frontend system design interview questions. This is the very first article and I plan to work on other questions like Design a WYSIWYG editor, YouTube, Facebook, Netflix, etc.

Check out the YouTube video that I made for this practice:

Mock up

I plan to discuss about:

1. Requirements 2. API/Data flow 3. Component architecture / UI State & Props 4. Performance 5. Accessibility 6. I18N 7. Cross-device

Functional Requirements:

1. Table should have a header 2. Table columns should be configurable (Name, width, order, sortable, editable) 3. Table rows should be selectable(multi-select, single-select) 4. Table columns could include JSX Element or primitive types. 4. Table could have a filter (client side vs server side) 5. Table could have a pagination component 6. Page size could be configurable

Non-functional requirements:

1. Table components should avoid unnecessary re-render 2. Table should support accessibility & internationalization 3. Should have cross-device support. — responsive on mobile

API/Dataflow

Component Architecture

Table component architecture

UI State & Props

Table component props
State when using the table component in React

Performance Improvements

1. Provide key property for improved re-rendering of list items 2. If using react — Use react hooks to avoid re-rendering 3. Event delegation

Internationalization — sample i18n.json:

Sample i18n.json

Mobile support

1. To have a different design on mobile — horizontal table to vertical 2. Multiple lines 3. Use accordion to show less important data 4. Table preferences — hide certain columns 5. Sticky columns to the left or right side

Accessibility

1. Using table markup to present tabular data 2. Using the scope attribute to associate header cells and data cells in data tables 3. Pass in the aria label for selection to align with the language

If you like this content, please give me a thumbs up. Please let me know your insights and thoughts on this. It would be very nice to grow with you all and extend my knowledge.

Front End Development
Frontend
System Design Interview
JavaScript
Web Development
Recommended from ReadMedium
avatarSatish Shriwas
Top JavaScript Interview Question: Task Runner with Concurrency

Imagine you’re given several asynchronous tasks that need to be executed, but you can only run a limited number of them concurrently. Once…

4 min read
avatarFrontend Developer
SDE-2 Frontend Interview Experience at Tekion

Experience Level: 2.5+ Years Location: Bangalore

3 min read
avatarDipak Ahirav
The Untold Secrets of Optimizing React Performance for Enterprise Applications

React is a powerful tool, but when it comes to enterprise applications, performance optimization becomes crucial. Enterprises deal with…

4 min read
avatarEishta Mittal
Javascript Interview: Implement Async helper- sequence()

Objective:

2 min read
avatarHimanshu Yadav
10 Advance JavaScript Interview Questions

1. What are Proxies in JavaScript, and how are they used?

4 min read
avatarJavaScript With Vinay
🎯 Cracking the Frontend Interview: Livspace’s Initial Screening Insights 🚀

💡A Deep Dive into Livspace’s Technical Recruiter Call for Frontend Engineers By Vinay Kumar

3 min read