Replace datatables

[sebastiandedeyne]

Find an alternative library

[freekmurze]

Vuetiful seems nice

Some alternatives: http://www.rent-a-hero.de/wp/wp-content/uploads/2017/04/vuegrid/

[freekmurze]

Thinking about the how a simple home grown component could be used.

@sebastiandedeyne @willemvb What are your thoughts on this?

<SortableTable rows="{{ $rowsJson }}" sort-on="name, desc">
   <SortableColumn name="name" field="name"></SortableColumn> 
   <SortableColumn name="Publicatie" field="publishDate", data-type="date:Y:m:d" filter="false"></SortableColumn> 
   <SortableColumn sortable="false" filter="false">
      <slot scope="row"> 
         @{{ row.deleteLink }} @{{ row.anotherLink }}
      </slot>
   </SortableColumn>   
</SortableTable>

[sebastiandedeyne]

Naming nitpicks:

sort-on => sort-by + sort-order data-type => datatype filter => filterable

When adding an a tag to name to link to the detail page, how will we ensure it doesn't include the html when filtering?

[freekmurze]

When adding an a tag to name to link to the detail page, how will we ensure it doesn't include the html when filtering?

Maybe with a little bit of magic? Let's parse all the fields if any of them contain a link, just use the content between the tags.

[sebastiandedeyne]

That should do the trick!

Maybe we could add a url option too, so we don't need to write our own a tag.

<SortableColumn name="name" url="editUrl" field="name"></SortableColumn>

[willemvb]

Random thoughts:

• <SortableColumn sortable="false" ... looks a bit strange. Maybe <sortablecolumn> vs <column>?
• SortableTable -> hooks into the html concept of tables. What if we move to eg. grids with other orientation? More generic, shorter name maybe? I really liked simple templates like <tabs><tab>... Eg: dataset, datatable, datarows, records, ...

<records data="{{ $json }}" sort-by="name">
    <field label="Online" filter-by="status === 'online' ? 1 : 0" >
        <img src="{status}.png">
    </field>
    <field label="Title" value="name"></field>
    <field sortable=false filterable=false label="Price" value="price + ' €' " class="field-numeric"></field>
</records>

• Fields could contain all sorts of html, so magic sorting would be a nice start. A separate value to filter by could also be handy.
• Is the filter field rendered automagically or also a configurable tag?

[freekmurze]

• I'm afraid that <column> might collide with other components. It's recommend for Vue components to use multiple syllables do avoid conflicts. Ignored that recommendation with our tabs component because tabs, tab just were too good not to use.
• DataGrid is shorter, but it sounds so Microsoft. I'd like to have a warm name for this. Naming things is hard 😄
• seperate value would be a good idea
• filter field will be rendered automagically, with an option to turn it off.

Basic Idea is that this component should just work for us with a minimal amount of configuration.

[sebastiandedeyne]

Words: catalog, index, directory, listing.

...They all suck though.

[freekmurze]

ShittyTable 😁

[freekmurze]

Maybe TableView? Not too long, sounds kinda friendly. There must be a better name still though...

[spatie-bot]

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.