[Feature request] DataTable component

[nvms]

trafficstars

datatables are tricky to do "right", and I want to do this right. with that said, this might not make it into 2.0.3!

this will replace the current table component, which right now is just a wrapper around the builtin table element that adds some framework-specific styling to it.

this component should:

1. accept items as an array of objects. object keys should be expected to map to a column header.
2. optionally interface with VaPagination
3. have the ability to sort asc/desc by heading
4. accept a "selectable" prop, enabling you to "select" rows via a checkbox in the first column
5. recognize row items that have "children", and allow you to expand the row to reveal those children as additional, indented rows
6. have the ability to pin a column or columns to the left/right - potentially helpful when horizontally scrolling very large data sets
7. columns should accept custom filter methods to apply to the data in that column
8. should accept a loading prop that covers the table with a VaLoading (once VaLoading's backdrop is implemented) while data is being loaded - helpful for large data sets
9. should be able to export the table to csv (all data, or optionally just what is being viewed/filtered)
10. a column should accept a slot key that can be used as a reference to a scoped slot, i.e.:

<template>
  <va-table :columns="columns" :data="data">
    <template slot-scope="{row, index}" slot="second">
      <va-button><va-icon type="trash" /></va-button>
    </template>
  </va-table>
</template>

columns: [
    {
        title: 'First header',
        key: 'first'
    },
    {
        title: 'Second header',
        slot: 'second'
    }
],
data: [
 ...
]

[max-frai]

My thoughts. I'm using now vuetable-2: https://www.vuetable.com/ and it's architecture seems okay. I like it because it splitted loading part into two: auto with ajax calls and manual with data manager. In my apps I use websockets navigation so it's very important. Just a tip to construct overall architecture right before start

[thebrownfox]

Lol I implemented something like this with the wrapper around.

It can create empty cell if no data for particular th/column are present, sorting, filtration of columns and stuff...want to implement drag&drop sorting to columns as well. Slot is used as a container of last <td></td> for buttons or whatever is needed and thus the buttons are part of parent view/component without the need of firing events back etc.

label values could go somewhere else as we will add more languages.

data got to be prepared/computed beforehand in the following format

:data="tableData"

tableData: [
                {
                // This is computed object that represents row
                id: 1,
                row: [
                        // Content of the row. Property label might be redundand since the switch to types
                        {
                            label: "Head",
                            type: "type1"
                            value: "lel"
                         },
                         {
                            label: "Name",
                            type: "type2"
                            value: "lmao"
                         },
                         {
                            label: "Age",
                            type: "type3"
                            value: "topkek"
                         }
                      ]
                  }
            ]

The columns that are selected by default, can be overriden via filter by adding or removing types :columns="columns"

columns: [
            { 
                label: "Head", 
                type: "type1" 
            },
            { 
                label: "Name", 
                type: "type2" 
             }
         ]