Datatable sync

[nekosaur]

Made the following changes:

• added synced pagination object prop, and moved page, rowsPerPage, sortBy and descending into it (solves DataTable: changing rows per page mutates a prop, resulting in a warning #498)
• v-model is now optional and used for selected array (together with regular prop selectedKey) (solves Manage selected state in the data-table component instead of in the data itself #400)
• incoming data moved to regular items prop
• items slot now exposes a boolean selected which can be used in v-checkbox
• removed defaultSort as pagination prop can be used to same effect

This change allows for external control of pagination, sorting and selection.

Selected example (selectedKey defaults to 'id')

<v-data-table
  v-model="selected"
  :items="items"
  :headers="headers"
  select-all
  >
  <template slot="items" scope="props">
    <td><v-checkbox primary v-model="props.selected"></v-checkbox></td>
    <td>#{{ props.item.id }}</td>
    <td>{{ props.item.first_name }}</td>
    <td>{{ props.item.email }}</td>
    <td>{{ props.item.gender }}</td>
  </template>
</v-data-table>
...
<script>
  export default {
    data () {
      return {
        selected: []
      }
    }
  }
</script>

Pagination example (change default sort)

<v-data-table
  :pagination.sync="pagination"
  :items="items"
  :headers="headers"
  select-all
  >
  <template slot="items" scope="props">
    <td><v-checkbox primary v-model="props.selected"></v-checkbox></td>
    <td>#{{ props.item.id }}</td>
    <td>{{ props.item.first_name }}</td>
    <td>{{ props.item.email }}</td>
    <td>{{ props.item.gender }}</td>
  </template>
</v-data-table>
...
<script>
  export default {
    data () {
      return {
        pagination: {
          sortBy: 'first_name'
        }
      }
    }
  }
</script>

[johnleider]

I think that this method could be cleaned up a bit. The same call is made for every scenario, the only thing that changes is the object that is emitted. Assign the value of that object and only have one this.$emit.

[johnleider]

I think we should let the selected be controlled under the model and the items be under a prop items, and just sync that. Would be curious to hear others thoughts.

v-model="yourSelectedRows"
:items.sync="tableItems"

[johnleider]

should be const as it doesn't change value, could also just put it into the Object.assign arguments.

[avengerweb]

Why default sort is part of pagination? Let's locate it in headers maybe?

[nekosaur]

@avengerweb It's part of the synced prop so that sorting can be controlled outside of the data table. The end result is that it can also be used to set the default sorted column. Placing an option in the headers as well duplicates functionality which already exists.

[johnleider]

What's this guy for?

[johnleider]

All reviewers have until Sunday to provide feedback.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord