datatable with up\down order buttons

[illinineverdie]

Looking for an implementation of the datatable with up\down buttons for the rows. I am new to ipyvuetify, vuetify, and vue. I found this example vuetify-table-drag.. and this looks like it would meet my needs... but not really sure how to integrate that with ipyvuetify. I assume it would be with a template.. but still learning.

Is there an ipyvuetify implementation already out there for this? (cuold be missing it)

Thank you!

[mariobuikhuizen]

Yes, this is possible with the use of the template interface of ipyvuetify combined with https://github.com/mariobuikhuizen/ipyvuedraggable:

import traitlets
import ipyvuetify as vy

class MyTable(vy.VuetifyTemplate):
    template = traitlets.Unicode('''
    <template>
      <v-data-table
          :headers="tableHeaders"
          :items="tableItems"
          :loading="false"
          item-key="name"
          :show-select="false"
          :disable-pagination="true"
          :hide-default-footer="true"
          class="page__table"
        >
          <template v-slot:body="props">
            <draggable
              :list="tableItems"
              tag="tbody"
            >
              <tr
                v-for="(user, index) in tableItems"
                :key="index"
              >
                <td>
                  <v-icon
                    small
                    class="page__grab-icon"
                  >
                    mdi-arrow-all
                  </v-icon>
                </td>
                <td> {{ index + 1 }} </td>
                <td> {{ user.name }} </td>
                
                <td>
                  <v-icon
                    small
                    @click=""
                  >
                    mdi-pencil
                  </v-icon>
                </td>
              </tr>
            </draggable>
      </template>
    </v-data-table>    
    </template>
    ''').tag(sync=True)
    
    tableHeaders = traitlets.List([
        { 'text': '', 'sortable': False },
        { 'text': '#', 'sortable': False },
        { 'text': 'NAME', 'value': 'name', 'sortable': False }
    ]).tag(sync=True)
    tableItems = traitlets.List([
        {'name': 'User1'},
        {'name': 'User2'},
        {'name': 'User3'},
    ]).tag(sync=True)

myTable = MyTable()
myTable

[illinineverdie]

Awesome! Thank you!

I was able to get it to work in notebook classic, but not jupyter lab. Is there a way to install the extension in jupyter lab? or is it compatible with that yet.

Greatly appreciated.

[mariobuikhuizen]

You probably need to do this step: https://ipywidgets.readthedocs.io/en/stable/user_install.html#installing-the-jupyterlab-extension.

[joseberlines]

Hi Mario, I think this kind of codes would be awesome as stand alone notebooks in the list of examples. This one: ipyvue_example_table_drag