explorer: Investigate solutions for building Tables in a Svelte application

[nortonandreev]

The new Explorer is a Svelte application that is heavily focused on table functionalities. Given the complexity and the importance of efficient data presentation in our app, we need to explore and evaluate various solutions for integrating or building tables within a Svelte environment.

Requirements:

1. Performance: Ability to handle large datasets without significant performance degradation.
2. Responsiveness: Tables must be responsive to accommodate various device sizes.
3. Interactivity: Features such as sorting, filtering, and pagination are crucial.
4. Integration: Compatibility with Svelte without requiring extensive adaptations.

Goals:

• Review existing libraries that are compatible with Svelte or could be adapted for Svelte.
• Determine if a custom solution might be more suitable based on our specific needs.

Action Items:

• Compile a list of potential libraries and tools.
• Evaluate each for performance, features, and ease of integration with Svelte.
• Discuss potential for developing a custom table component, if needed.

[nortonandreev]

I've been exploring various table solutions. One option is the table component from the actively maintained Flowbite library. Another simpler alternative is Skeleton.

However, both solutions rely on Tailwind CSS. Are we comfortable introducing this dependency? If we stick with BEM, we will mitigate potential style clashes. We could also consider bundling a custom Tailwind build to reduce website size.

My main concern with Tailwind CSS is its Preflight feature, akin to CSS normalize, which could introduce side effects. However, this can be disabled in the tailwind.config.

Another contender is AG Grid, offering rich features with a free version that might suffice for our needs. It auto-generates table markup, but is less customizable compared to Flowbite.

With Flowbite, we can define our own markup using provided components (TableBody, TableBodyCell, TableBodyRow, etc.) and incorporate our own elements like badges and icons.

I'm 50/50 between Flowbite and building custom table views from scratch, given our differing desktop and mobile views. With the libraries, the default layouts might be difficult to customize to the extend we need.

Additionally, we need to decide on table features like client-side pagination and sorting. These will impact implementation scope, even if using library such as Flowbite, as we need to provide our own logic.

Overall, while Flowbite seems to offer flexibility, custom solutions might better suit our unique requirements.

cc: @kieranhall @ascartabelli @deuch13 @HDauven

[nortonandreev]

I was also suggested this solution TanStack. I am looking at the basic example which showcases a bit of how to use the library.

[nortonandreev]

It was decided to move with a custom implementation.