Replacing tabulator with a minimal table component

Feb 8, 2021 1:08 AM

Tabulator is a piece of software that I’ve used across several projects. I’ve used it on my website, but my design sensibilities tell me to be lean with my dependencies on the site. I don’t need all of the fancy features that the library provides, like the virtual dom and styling. I replaced the table with a component that has fewer dependencies. Play around with it by manipulating the pagination size below.

0 u2opw8u2opw8u2opw8u2opw8u2opw8u2opw8u2opw8u2opw8
1 xi8ntrxi8ntrxi8ntrxi8ntrxi8ntrxi8ntrxi8ntrxi8ntr
2 ajdmslajdmslajdmslajdmslajdmslajdmslajdmslajdmsl
3 6rdk9f6rdk9f6rdk9f6rdk9f6rdk9f6rdk9f6rdk9f6rdk9f
4 26oxr26oxr26oxr26oxr26oxr26oxr26oxr26oxr
5 tj2zgtj2zgtj2zgtj2zgtj2zgtj2zgtj2zgtj2zg
6 1mae091mae091mae091mae091mae091mae091mae091mae09
7 bgw97ebgw97ebgw97ebgw97ebgw97ebgw97ebgw97ebgw97e
128 rows - page 1 of 16

I suggest taking a look at the analytics page too. You’ll see similar tables in action: analytics page

The full source code can be found in the site repository.

I’ve documented the table sizes here.


> git log -n1 --pretty=oneline
a521650e470e04fabb04bc0fd78a7cc29d334824 Move plot into components
> npm build
> ls .__sapper__buildclientTable*
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----          2/7/2021   1:40 PM          22632 Table-3a3654c8.css
-a----          2/7/2021   1:40 PM         359791 Table.e1dfc581.js


> git log -n1 --pretty=oneline
834bd147596bd4ae197f22c1f5cde793f6b408db (HEAD -> main, origin/main) Remove tabulator
> npm build
> ls .__sapper__buildclientTable*
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----          2/7/2021   1:35 PM             81 Table-8db1bf94.css
-a----          2/7/2021   1:35 PM          75367 Table.6a05f367.js

The original one based on Tabulator is 360kb of code and 23kb of CSS, while the new one is 75kb of code with 0.08kb of CSS. I like the leaner code, and having a Svelte component leaves a lot of flexibility for future functionality.