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 1h728s1h728s1h728s1h728s1h728s1h728s1h728s1h728s
1 gewrjegewrjegewrjegewrjegewrjegewrjegewrjegewrje
2 id0dxhid0dxhid0dxhid0dxhid0dxhid0dxhid0dxhid0dxh
3 1z9v61z9v61z9v61z9v61z9v61z9v61z9v61z9v6
4 mm61samm61samm61samm61samm61samm61samm61samm61sa
5 agyvniagyvniagyvniagyvniagyvniagyvniagyvniagyvni
6 xd8basxd8basxd8basxd8basxd8basxd8basxd8basxd8bas
7 iw3jxiw3jxiw3jxiw3jxiw3jxiw3jxiw3jxiw3jx
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.