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 v6piigv6piigv6piigv6piigv6piigv6piigv6piigv6piig
1 7nknt87nknt87nknt87nknt87nknt87nknt87nknt87nknt8
2 k9s1sk9s1sk9s1sk9s1sk9s1sk9s1sk9s1sk9s1s
3 6viwo86viwo86viwo86viwo86viwo86viwo86viwo86viwo8
4 6aol0k6aol0k6aol0k6aol0k6aol0k6aol0k6aol0k6aol0k
5 swbwoqswbwoqswbwoqswbwoqswbwoqswbwoqswbwoqswbwoq
6 95xbc995xbc995xbc995xbc995xbc995xbc995xbc995xbc9
7 5g3u195g3u195g3u195g3u195g3u195g3u195g3u195g3u19
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.