Building controllable Table component in React

Monday, 23/12/2019

Tram Ho

Introduction

Today I would like to introduce a problem that I think you will encounter in real projects, or simply discuss how to analyze a problem, how to use react custom hooks, how to write unit tests for custom. hook, … and more

It is to build a controllable table with a react hook includes the following functions:

Search data according to all columns in the table
Sort data in ascending / descending order by column by clicking on the header
Pagination
Change the number of rows shown on each page

This topic is a bit too much, so I divided into 3 parts:

Part 1: Introduction and writing of pure javascript util functions ( search , sort , paging )
Part 2: Use the react hook to build a complete table with the util functions in Part 1
Part 3: Use jest to write Unit Test

After completing the above 3 sections, the result will be as follows:

Start part 1

Question:

Most of the admin apps for admin have a display data section that uses the table , in which the table uses some functions like searching for a certain row in the table, sort data ascending and descending by 1 column by Click on the header of that column, paginate, change the number of rows displayed on the table, …

And with the above problem, if implemented according to Single Page Application using React with the requirement that: when loading the page for the first time, the server will return 1000 (depending on the limit) records in the database, then the client side will search, sort, Paging relies on that list data without having to request it on the server again.

With such a request, the client will implement the Table component as follows:

Props to be passed to the Table: headers – list of data headers; dataSource – list of 1000 records data from server
The table component will render: input search, paging, button sort on column header, list of rows after performing search / sort / paging.

In this section, I just raised the problem for the problem and wrote the util functions related to processing search, sort, paging in javascript without using react .

Util functions in Table:

Assume the input data of the Table as follows:

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    first_name <span class="token punctuation">:</span> <span class="token string">'harry'</span> <span class="token punctuation">,</span>
    last_name <span class="token punctuation">:</span> <span class="token string">'kane'</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    first_name <span class="token punctuation">:</span> <span class="token string">'macus'</span> <span class="token punctuation">,</span>
    last_name <span class="token punctuation">:</span> <span class="token string">'rashford'</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
<span class="token punctuation">]</span>

const data = [

{

first_name : 'harry' ,

last_name : 'kane' ,

} ,

{

first_name : 'macus' ,

last_name : 'rashford' ,

} ,

]

Search

Description : After the user enters textbox search and press enter, he will search for items of list data match with text search. Thus the input of the search function consists of an array of objects and text search, which results in an array list of data after it has been searched.

Implement:

<span class="token keyword">const</span> search <span class="token operator">=</span> <span class="token punctuation">(</span> rows <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> searchValue <span class="token operator">=</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  rows <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> row <span class="token operator">=&gt;</span> <span class="token comment">// Lọc các rows match với searchValue</span>
    Object <span class="token punctuation">.</span> <span class="token function">values</span> <span class="token punctuation">(</span> row <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">some</span> <span class="token punctuation">(</span> value <span class="token operator">=&gt;</span> <span class="token comment">// Check nếu ít nhất 1 column match với searchValue</span>
      <span class="token function">String</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span>
        <span class="token punctuation">.</span> <span class="token function">toLowerCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
        <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> <span class="token function">String</span> <span class="token punctuation">(</span> searchValue <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toLowerCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">// Check nếu data chứa searchValue</span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">)</span>

const search = ( rows = [ ] , searchValue = '' ) =>

rows . filter ( row => // Lọc các rows match với searchValue

Object . values ( row ) . some ( value => // Check nếu ít nhất 1 column match với searchValue

String ( value )

. toLowerCase ( )

. includes ( String ( searchValue ) . toLowerCase ( ) ) // Check nếu data chứa searchValue

)

Sort

Description : If you click on the header of any column, sort by the value of that column, each click will toggle in ascending order (ASC) / decrease (DESC) and default is ascending. Thus, the input of the sort function includes an array of objects, the key (which column to sort by) and the sort order, the result returns the array list data after sorted.

Implement:

<span class="token keyword">const</span> sort <span class="token operator">=</span> <span class="token punctuation">(</span> rows <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> key <span class="token operator">=</span> <span class="token string">''</span> <span class="token punctuation">,</span> order <span class="token operator">=</span> <span class="token constant">ORDER_ASC</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> rows <span class="token punctuation">.</span> <span class="token function">sort</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> a <span class="token punctuation">,</span> b <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span> a <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token operator">&gt;</span> b <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> order <span class="token operator">===</span> <span class="token constant">ORDER_ASC</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token comment">// Nếu thứ tự tăng dần thì xếp a trước b và ngược lại</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span> a <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token operator">&lt;</span> b <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> order <span class="token operator">===</span> <span class="token constant">ORDER_ASC</span> <span class="token operator">?</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token comment">// Nếu thứ tự tăng dần thì xếp b trước a và ngược lại</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token number">0</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

const sort = ( rows = [ ] , key = '' , order = ORDER_ASC ) => {

return rows . sort ( ( a , b ) => {

if ( a [ key ] > b [ key ] ) {

return order === ORDER_ASC ? 1 : - 1 // Nếu thứ tự tăng dần thì xếp a trước b và ngược lại

}

if ( a [ key ] < b [ key ] ) {

return order === ORDER_ASC ? - 1 : 1 // Nếu thứ tự tăng dần thì xếp b trước a và ngược lại

}

return 0

} )

}

Paging

1. Get total page:

The function get total page is used to know when to enable / disable prev / next button in UI. Pass the length of the total array and the limit number of rows will display per page; The result is the total page number.

<span class="token keyword">const</span> <span class="token function-variable function">getTotalPage</span> <span class="token operator">=</span> <span class="token punctuation">(</span> length <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">,</span> limit <span class="token operator">=</span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Math <span class="token punctuation">.</span> <span class="token function">ceil</span> <span class="token punctuation">(</span> length <span class="token operator">/</span> limit <span class="token punctuation">)</span>

const getTotalPage = ( length = 0 , limit = 10 ) => Math . ceil ( length / limit )

1. Get page items:

The get page items function is used to limit the number of items displayed on the table of the current page. Pass the array total, the current page number and the limit number of rows will display on each page; The result is the number of items to display of the current page.

<span class="token keyword">const</span> <span class="token function-variable function">getPageItems</span> <span class="token operator">=</span> <span class="token punctuation">(</span> allItems <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> currentPage <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">,</span> limit <span class="token operator">=</span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  allItems <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> currentPage <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token operator">*</span> limit <span class="token punctuation">,</span> currentPage <span class="token operator">*</span> limit <span class="token punctuation">)</span>

const getPageItems = ( allItems = [ ] , currentPage = 1 , limit = 10 ) =>

allItems . slice ( ( currentPage - 1 ) * limit , currentPage * limit )

Conclude

Those are all utils functions used to control the display data on the Table, let me finish Part 1 here, in the next part I will init react app and create a complete Table component based on the above utils functions.

Thank you for reading the article!

Share the news now

Source : Viblo