Data Table

Yangshun TayEx-Meta Staff Engineer

Given a list of users, build a user data table that displays users in a paginated format.

Requirements

Table requirements
- The user data table should display the following columns: Id, Name, Age, Occupation
- Each row in the table represents a single user
Pagination requirements
- The pagination controls should allow the user to navigate to previous and next pages
- The pagination controls should display the current page number and the total number of pages
- The table should update dynamically when the user navigates to a different page
- Provide an option to select the number of users displayed per page (e.g., 5, 10, 20)

Asked at these companies

Unlock company signalsPremium shows which companies ask this question so you can prioritize practice by target company.

Unlock

Data Table (Official solution)

Yangshun TayEx-Meta Staff Engineer

Solution files

1<script>
export let data;
3
const columns = [
  { label: "ID", key: "id" },
  { label: "Name", key: "name" },
  { label: "Age", key: "age" },
  { label: "Occupation", key: "occupation" },
];
const pageSizes = [5, 10, 20];
11
let page = 1;
let pageSize = 5;
14
function changePageSize(event) {
  pageSize = Number(event.currentTarget.value);
  page = 1;
}
19
$: totalPages = Math.ceil(data.length / pageSize);
$: pageUsers = data.slice((page - 1) * pageSize, page * pageSize);
22</script>
23
24<table>
<thead>
  <tr>
    {#each columns as column}
      <th>
        {column.label}
      </th>
    {/each}
  </tr>
</thead>
<tbody>
  {#each pageUsers as user (user.id)}
    <tr>
      {#each columns as column}
        <td>{user[column.key]}</td>
      {/each}
    </tr>
  {/each}
</tbody>
43</table>
44
45<hr />
46
47<div class="pagination">
<select aria-label="Page size" value={pageSize} on:change={changePageSize}>
  {#each pageSizes as size}
    <option value={size}>Show {size}</option>
  {/each}
</select>
<div class="pages">
  <button type="button" disabled={page === 1} on:click={() => (page -= 1)}>
    Prev
  </button>
  <span aria-label="Page number">Page {page} of {totalPages}</span>
  <button
    type="button"
    disabled={page === totalPages}
    on:click={() => (page += 1)}
  >
    Next
  </button>
</div>
66</div>

Solution

page and pageSize are component variables. Reactive declarations derive the total page count and current slice whenever either value changes.

Data tables are frequently asked about during front-end interviews, as displaying paginated data with filtering functionality is a UI pattern built at almost every company.

Since the table skeleton has been provided, we can focus on the state and data manipulation aspects of the data table.

State

State is straightforward. Only two state values are needed: the current page and the page size. Since the data does not change in this case, there's no need for the user data to be part of state.

These state values are manipulated by the page size <select> and prev/next buttons.

The maximum number of pages can be derived from the number of users divided by the page size, so it does not need to be part of state.

Pagination

We implement a function paginateUsers that takes in the list of users, the page number, and the page size. It will return the list of users for the current page and the total number of pages.

To determine the list of users for the current page, we can determine the start and end indices, then use Array.prototype.slice() to extract the appropriate slice from the users list:

Start index: Take the page number multiplied by the page size. Since the page numbers start from 1, we have to subtract 1 from the page number first. This value will be the starting index of the users to be sliced.
End index: Add the page size to the calculated start index. Since we'll be using Array.prototype.slice(), it doesn't matter if the end index exceeds the size of the list.

paginateUsers() will be called in the render path, and the returned pageUsers array contains the current page of users to be rendered. The rendering code doesn't need to be changed much.

User experience

Some other user experience improvements we can make:

Reset the page number to the first page when the page size changes. Otherwise, it can be confusing when the user changes the page size, the current page exceeds the total pages, and nothing is shown.
Disable the Prev/Next buttons when navigating to the previous or next page is not possible.

Test cases

Table
- Test that the table displays the following columns: Id, Name, Age, Occupation.
- Test that each row in the table represents a single user.
- The table updates to display users on the next page.
Pagination
- Test that the pagination control allows navigation to the previous page.
- Test that the pagination control allows navigation to the next page.
- Test that the pagination controls display the current page number and the total number of pages.
- Test that the page buttons are disabled appropriately.
Dynamic table updates
- Test that the table updates dynamically when the user navigates to a different page.
- Navigate to a different page using the pagination controls. The table should reflect the users for the selected page.
- Change the selection to 5, 10, and 20 users per page. The table should update to display the selected number of users per page.

You must be signed in to view your saved versions

Sign in

Create an account

Data Table

Requirements

Asked at these companies

Data Table (Official solution)

Solution

State

Pagination

User experience

Test cases

You must be signed in to view your saved versions

Loading editor

Loading editor

Loading editor

JavaScript Console