I have a datatable in my vue component.

Following is my header array.

HeaderArray() {
            return [
                {text: 'Document', value: 'document',classList: 'w-1/3'},
                {text: 'Added by', value: 'added_user_name',classList: 'w-1/3'},
                {text: 'Expiration', value: 'valid_date'},
                {text: 'Validity', value: 'validity_status',classList: 'w-1/3', align:'start'},
                {text: '', value: 'actions'},
            ];
        },

Cell content of the Validity column is centered, But I want them to be align left.

Eventhough I triedalign:'start' the content display center...

How to make them align left?

Column header is aligned to left though...

CodePudding user response：

By default column data in vue-data-table is left aligned. Hence, all the columns are already left aligned but if you want to make other columns are center aligned and validity as left aligned then you have to apply align: 'center' property in all the other column headers object instead of changing for validity column.

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
                {text: 'Document', value: 'document',classList: 'w-1/3', align:'center'},
                {text: 'Added by', value: 'added_user_name',classList: 'w-1/3', align:'center'},
                {text: 'Expiration', value: 'valid_date', align:'center'},
                {text: 'Validity', value: 'validity_status',classList: 'w-1/3'},
                {text: 'Actions', value: 'actions', align:'center'},
            ],
      documentDetails: [
        {
          document: 'Document 1',
          added_user_name: 'user 1',
          valid_date: '04-12-2022',
          validity_status: 'valid',
          actions: 'Edit'
        },
        {
          document: 'Document 2',
          added_user_name: 'user 2',
          valid_date: '05-12-2022',
          validity_status: 'invalid',
          actions: 'Edit'
        }
      ],
    }
  },
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="documentDetails"
      
    ></v-data-table>
  </v-app>
</div>