innoq/tabelle

A library for generating pretty filterable and sortable tables that use your backend of choice

tabelle's Issues

Add a bit more flexibility to displaying a response

When a user does a search that comes back with no results, I want to show a helpful hint like "Your search did not return any results." I want to be able to translate this and I want to be able to style it, so I would like to generate that answer on the server side. However, I can currently only return a tbody, so I don't have that option. Suggestion:

The user needs to provide an id on the ta-belle element. If they don't, they will receive an error (I think I would just do a console.error("...") and then not activate ta-belle). When ta-belle receives the answer from the server, it will search for the element with the same ID and replace its content with the content of that element. Afterwards, it will re-add the filters. This allows users to add additional elements to the response other than the table.

What do you think? Thanks for the project, it really helps me get things done <3

i18n for labels in custom element

Currently, the labels for the components that are generated by the custom element (e.g. sort arrows, filter field) are hard coded so that they contain English text. We should add an option to customize the texts so that Tabelle can be used in other languages.

The SVGs have hard-coded paths

The SVGs for the arrows have hard-coded paths, so if you install tabelle as an NPM package, the images won't be found:

https://github.com/innoq/tabelle/blob/master/components/atoms/radio-arrow/_radio-arrow.scss#L7

This needs to be configurable somehow 🤔

A demo GIF

I think the README would benefit from a GIF screencapture of ta-belle in action. When I search for libraries that offer UI stuff, I always like to see it in action – and I prefer to do that without needing to install it first 😸

Make customElements polyfill optional

The customElements polyfill should not be a part of this bundle, but rather should be able to be added explicitly by users only when they need it.

Show a clear error when you provide query parameters

I used tabelle for a form where I have a query parameter that I need to be submitted alongside the tabelle parameters. Let's say I have invoices, and I always filter them by their status:

/invoices?status=paid

So I did this:

<ta-belle search-src="/invoices?status=paid">
  ...
</ta-belle>

When I do this, I get the following exception:

query strings are invalid within GET forms' action

The solution is to do this:

<ta-belle>
  <form action="/invoices">
    <input type="hidden" name="status" value="paid">
  </form>
</ta-belle>

I like the solution, but I think that:

1. The error should be more straight forward
2. The README should point out how to handle that in a FAQ section

What do you think? Thanks for the project, it really helps me get things done <3

When you click on a sortable arrow, it should be deselected.

This is a JavaScript only feature (because you can't deselect a radio button in HTML), but it would be nice.

When installing as an NPM package, you need to provide the path

If you install tabelle as an NPM package, you have to import it like this:

import 'tabelle/dist/tabelle';

We can shorten that to:

import 'tabelle';

by setting the main attribute in the package.json to dist/tabelle.js 😄