How to Build a Table With Filter/Pagination Without 3rd Party Libraries
Reading from the title, you are probably thinking: why not use a 3rd party library to build the table and get the job done? Won’t it be more convenient to just use a library that has pagination and filter build in.
It depends on what you are trying to accomplish.
If your goal was simply to build a simple table with pagination built in, then feel free to use a library. If you are a developer like me that continues to hone css and javascript skills, I think it’s worth trying to implement this from scratch and understand how table are actually formatted and implemented behind the scene.
To understand how table works, let’s take a look at what options we have:
- html5
- react-table
- react-data-table-component
- react bootstrap
- material-ui
- semantic ui
- kendo ui
And so on! We have an abundance of options but to understand how it works fully behind the scene, let’s take a look at the html5 implementation.
In html 5, we can create a table via the <table> tag, with <tr> as a table row tag, and <th> as a table header tag. If you are building a table with a header it will look like this:
and if we are generating a table with a header and some row contents, it will look like this:
Wait, what? Shouldn’t create a html5 table help us generate a table format automatically?
Let’s take a look at my version of a table component in react:
Over here, I have a few parts to this table component:
- search/filter bar
- table header
- table rows/entries
- table pagination
With searchbar, we set the value of the filter which we used to apply to the entries of data we get.
Afterward, we generate a header that will be provided as a prop.
One might ask: how come we are not generating the header in the table component?
That’s because we want to give users the flexibility to generate their own custom header. For a simple table, we probably do not need to worry about this. In a real world scenario, the header can be customized in many ways according to client requirements and so on.
After the header, we take the array of data(known as entries) that was passed in and call renderRow to generate the row data for the table.
Again, we want to make the format of the row to be customizable and instead of dictating how the rows are rendered ourselves, we let the caller of the table component to determine that.
Here is a view of how that can look like:
When we initialize the table component, we add in a props called renderRow which takes in a row parameter and call generateRow function. This function is what determines how each row in he table looks like.
We also pass in the header into the table, in which we render the headers here and then passed into the table.
With the entries we simple pass into the table, in which the table component maps through the entries and call renderRow to generate the row formats in the table.
Now back to the table implementation:
Notice we also have a table pagination component. Before we dive into how the table pagination was built, let’s understand what it is first.
Well then…what is table pagination?
Pagination is the process of dividing a collection of data into different subsets, often times divided by an offset(for example, showing 10 entries per page).
Here is how it will looks like:
With the example above, we pass a pagelimit props, which dictates how many entries we show per page. We also pass in a page length, which is required for the pagination to be calculated properly.
We also pass in a current page and a set page props, where we use current page to highlight the page we are on, and call setPage when the user navigates to other pages.
Here’s how the table pagination implementation will look like:
We have renderPrevPageblocks, which allows user to navigate to previous pages or the first page. Vice versa we also have renderNextPageBlocks which allows users to navigate to next pages or the last page.
Last but not least we also render the page blocks in the middle, which allow us to free navigate to any pages we want.
Remember when we initially create a table from scratch the format of the table looks off? Let’s take a look at the page that generates the table, table header and table rows and see how the css gives the table a respectable look:
If you go to line 7 and you will notice there is a contentSection and headerSection css. They both have a rule of border 1px solid and a padding value of 8. The padding value is to give it spacing between each content and the header.
I know at this point all of you are probably wondering how tables are probably called with other existing libraries. Let’s take a look at how that will look like with react table:
It’s pretty similar to what we have. In fact, you can dive deeper and realize pagination options are available.
Here’s one take: while using a custom library would save more time but there is always a possibility that certain custom behaviors are not supported by these libraries.
There are pros and cons to each side but it is you as a developer that makes the decision as to whether to build from scratch or use a third party library.
You can check out this github link for my implementation of react table:
