I think I'm close but it blows up the page when I apply :sortable in the wrong place. With the below code I've been able to get the two manually defined columns to work. The problem now is getting sortable to work with my date column. I've tried adding :sortable=true, :sortable="true" to the & but no luck. Since I've created the rows and columns in the template it doesn't let me do anything with it in the data() section of vue. Potentially I'm thinking props.columns.updatedOn.sortable might be the direction to go. Anyone have thoughts on how to get the Updated column to sort? Thanks again.
https://jsfiddle.net/bismarck611/tmh5k32x/
<datatable :title="titleTextCheck" :columns="tableColumns1" :rows="userSitesFilter"> <th slot="thead-tr">Updated</th> <th slot="thead-tr">Actions</th> <template slot="tbody-tr" scope="props"> <td>{{ props.row.updatedOn | formatDate }}</td> <td> <button @click="(e) => $refs.modalName.openModal(props.row, e)" class="waves-effect waves-light btn blue darken-4"> View/Edit </button> <button v-if="userProfile.role === 'blah'" @click=" (e) => $refs.statusChangeModalName.openStatusChangeModal(props.row, e)" class="waves-effect waves-light btn blue darken-4"> Status </button> </td> </template> </datatable>
I think I'm close but it blows up the page when I apply :sortable in the wrong place. With the below code I've been able to get the two manually defined columns to work. The problem now is getting sortable to work with my date column. I've tried adding :sortable=true, :sortable="true" to the & but no luck. Since I've created the rows and columns in the template it doesn't let me do anything with it in the data() section of vue. Potentially I'm thinking props.columns.updatedOn.sortable might be the direction to go. Anyone have thoughts on how to get the Updated column to sort? Thanks again.
https://jsfiddle.net/bismarck611/tmh5k32x/
<datatable :title="titleTextCheck" :columns="tableColumns1" :rows="userSitesFilter"> <th slot="thead-tr">Updated</th> <th slot="thead-tr">Actions</th> <template slot="tbody-tr" scope="props"> <td>{{ props.row.updatedOn | formatDate }}</td> <td> <button @click="(e) => $refs.modalName.openModal(props.row, e)" class="waves-effect waves-light btn blue darken-4"> View/Edit </button> <button v-if="userProfile.role === 'blah'" @click=" (e) => $refs.statusChangeModalName.openStatusChangeModal(props.row, e)" class="waves-effect waves-light btn blue darken-4"> Status </button> </td> </template> </datatable>