Modulist Vue

Table

Default

<v-table :fields="normal.fields" :items="normal.items" />
1
export default {
  data() {
    return {
      fields: {
        name: { label: 'Name', sortable: true },
        createdAt: { label: 'Created', sortable: false },
      },
      items: [
        { id: 1, name: 'Item 1', createdAt: '1 days ago', },
        { id: 2, name: 'Item 2', createdAt: '2 days ago', },
        { id: 3, name: 'Item 3', createdAt: '3 days ago', },
      ],
    };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Custom template

NameCreated
Item 1
Unique identifier: 1
 1 days ago
Item 2
Unique identifier: 2
 2 days ago
Item 3
Unique identifier: 3
 3 days ago 
<v-table :fields="normal.fields" :items="normal.items" />
1
export default {
  data() {
    return {
      fields: {
        name: { label: 'Name', sortable: true },
        createdAt: { label: 'Created', sortable: false },
      },
      items: [
        { id: 1, name: 'Item 1', createdAt: '1 days ago', },
        { id: 2, name: 'Item 2', createdAt: '2 days ago', },
        { id: 3, name: 'Item 3', createdAt: '3 days ago', },
      ],
    };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Custom title

NameCreated
Item 1 1 days ago
Item 2 2 days ago
Item 3 3 days ago 
<v-table :fields="normal.fields" :items="normal.items">

  <!--custom header-->
  <template v-slot:header="{ handleSearchInput }">
    <v-table-header
      title="Custom title"
      :handleSearchInput="handleSearchInput"
    >
      <template v-slot:action>
        <v-dropdown placement="bottom-end" :options="[{ label: 'Share' }, { label: 'Remove' }]">
          <template v-slot:toggle>
            <v-button appearance="alternative">Actions</v-button>
          </template>
        </v-dropdown>
      </template>
    </v-table-header>
  </template>

</v-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default {
  data() {
    return {
      fields: {
        name: { label: 'Name', sortable: true },
        createdAt: { label: 'Created', sortable: false },
      },
      items: [
        { id: 1, name: 'Item 1', createdAt: '1 days ago', },
        { id: 2, name: 'Item 2', createdAt: '2 days ago', },
        { id: 3, name: 'Item 3', createdAt: '3 days ago', },
      ],
    };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Multi select

NameCreated
Item 1 1 days ago
Item 2 2 days ago
Item 3 3 days ago
Selected: [] 
<v-table
  multi-select
  v-model="multiple.selected"
  :fields="multiple.fields"
  :items="multiple.items"
/>
1
2
3
4
5
6
export default {
  data() {
    return {
      selected: [],
      fields: {
        name: { label: 'Name', sortable: true },
        createdAt: { label: 'Created', sortable: false },
      },
      items: [
        { id: 1, name: 'Item 1', createdAt: '1 days ago', },
        { id: 2, name: 'Item 2', createdAt: '2 days ago', },
        { id: 3, name: 'Item 3', createdAt: '3 days ago', },
      ],
    };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Pagination

Custom title

NameCreated
Item 1 2 days ago
Item 2 just now
Item 3 1 day ago
Item 4 1 week ago
Item 5 just now 
<v-table
  :current-page="pagination.currentPage"
  :fields="pagination.fields"
  :items="pagination.items"
>
  <template v-slot:header="{ handleSearchInput, selected }">
    <v-table-header
      title="Custom title"
      :handleSearchInput="handleSearchInput"
    />
  </template>
  <template v-slot:pagination="{ total, perPage }">
    <v-pagination
      v-model="pagination.currentPage"
      size="3"
      :total="total"
      :per-page="perPage"
    />
  </template>

</v-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default {
  data() {
    return {
      pagination: {
        currentPage: 1,
         fields: {
          name: { label: 'Name', sortable: true },
          createdAt: { label: 'Created', sortable: false },
        },
        items: [
          { id: 1, name: 'Item 1', createdAt: '2 days ago' },
          { id: 2, name: 'Item 2', createdAt: 'just now' },
          { id: 3, name: 'Item 3', createdAt: '1 day ago' },
          { id: 4, name: 'Item 4', createdAt: '1 week ago' },
          { id: 5, name: 'Item 5', createdAt: 'just now' },
          { id: 6, name: 'Item 6', createdAt: '3 years ago' },
          { id: 7, name: 'Item 7', createdAt: '1 week ago' },
          { id: 8, name: 'Item 8', createdAt: '1 week ago' },
          { id: 9, name: 'Item 9', createdAt: '1 week ago' },
          { id: 10, name: 'Item 10', createdAt: '9 week ago' },
          ...
        ],
      },
    };
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Table Props

Name Type Description Default Required
ready Boolean Show loading if false. Allowing to load data in async way true false
value Array Returns selected values [] false
fields Object Columns labels {} false
items Array Data [] false
multiSelect Boolean If true user can select multiple values false false
perPage Number How many items to render per page 10 false
currentPage Number Current page for pagination 1 false
sortCompare Function Custom function to perform sort null false
emptyText String Text for state when no data found 'There is no records.' false
emptyFilteredText String Text for state when search results not found 'There are no records matching your request' false

Table Slots

Name Props Description
header items, selected, handleSearchInput, disabledSearch Slot for table header
{key} field name value, item, index Slot for custom cell
pagination total, perPage Slot for pagination

TableHeader Props

Name Type Description Default
title String Appearance of spinner ['default', 'primary'] 'Table title'
searchable Boolean Display search or not false
handleSearchInput Function Function from table to keep query up to date to filter data properly. Required when searchable is true. None
disabledSearch Boolean

TableHeader Slots

Name Props Description
title None Slot for title
action None Slot for action

← Tabs →