• BSA Lab.
      home

  • apps
    Welcome
  • dashboard
    Layout
  • web
    Components
    keyboard_arrow_down
    • Lists
      list
    • Cards
      payment
    • Carousels
      recent_actors
    • Expansion panels
      view_day
    • Dialogs
      message
    • Tabs
      tab
    • Steppers
      directions_walk
    • Data tables
      view_module
    • Date/Time Pickers
      today
    • Text fields
      format_indent_increase
    • Forms
      assignment
  • alarm
    Warnings
    keyboard_arrow_down
    • Error-404
      alarm_add
    • Error-500
      alarm_on
    • Maintenance
      build
Vuetify / Components-data-tables
  • Documentation

  • Vuetify.js Quick-Start
  • Nuxt.js Guide
  • Vue.js Guide
Components - Data tables
The "v-data-table" component is used for displaying tabular data.
#1 Standard
The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the hide-actions prop.
Dessert (100g serving)arrow_upwardCaloriesarrow_upwardFat (g)arrow_upwardCarbs (g)arrow_upwardProtein (g)arrow_upwardSodium (mg)arrow_upwardCalcium (%)arrow_upwardIron (%)
Frozen Yogurt15962448714%1%
Ice cream sandwich2379374.31298%1%
Eclair262162363376%7%
Cupcake3053.7674.34133%8%
Gingerbread35616493.93277%16%
Jelly bean3750940500%0%
Lollipop3920.2980380%2%
Honeycomb4083.2876.55620%45%
Donut45225514.93262%22%
KitKat518266575412%6%

#2 Selectable rows
Selectable rows allow you to perform an action on specific and all rows.
check_box_outline_blank
Dessert (100g serving)arrow_upward Caloriesarrow_upward Fat (g)arrow_upward Carbs (g)arrow_upward Protein (g)arrow_upward Sodium (mg)arrow_upward Calcium (%)arrow_upward Iron (%)
check_box_outline_blank
Frozen Yogurt15962448714%1%
check_box_outline_blank
Ice cream sandwich2379374.31298%1%
check_box_outline_blank
Eclair262162363376%7%
check_box_outline_blank
Cupcake3053.7674.34133%8%
check_box_outline_blank
Gingerbread35616493.93277%16%
Rows per page:
5
  • 5
  • 10
  • 25
  • All
arrow_drop_down
1-5 of 10

#3 Search with custom page text
The data table exposes a search prop that allows you to filter your data.
Nutrition
search
Dessert (100g serving)arrow_upwardCaloriesarrow_upwardFat (g)arrow_upwardCarbs (g)arrow_upwardProtein (g)arrow_upwardSodium (mg)arrow_upwardCalcium (%)arrow_upwardIron (%)
Frozen Yogurt
15962448714%
1%
Ice cream sandwich
2379374.31298%
1%
Eclair
262162363376%
7%
Cupcake
3053.7674.34133%
8%
Gingerbread
35616493.93277%
16%
Rows per page:
5
  • 5
  • 10
  • 25
  • All
arrow_drop_down
From 1 to 5

#4 External pagination
Pagination can be controlled externally by using the pagination prop. Remember that you must apply the .sync modifier.
Dessert (100g serving)arrow_upward Caloriesarrow_upward Fat (g)arrow_upward Carbs (g)arrow_upward Protein (g)arrow_upward Sodium (mg)arrow_upward Calcium (%)arrow_upward Iron (%)
Frozen Yogurt15962448714%1%
Ice cream sandwich2379374.31298%1%
Eclair262162363376%7%
Cupcake3053.7674.34133%8%
Gingerbread35616493.93277%16%
  • chevron_left
  • 1
  • 2
  • chevron_right

#5 External sorting
Sorting can also be controlled externally by using the pagination prop. Remember that you must apply the .sync modifier. You can also use the prop to set the default sorted column.
Dessert (100g serving)arrow_upward Caloriesarrow_upward Fat (g)arrow_upward Carbs (g)arrow_upward Protein (g)arrow_upward Sodium (mg)arrow_upward Calcium (%)arrow_upward Iron (%)
Frozen Yogurt15962448714%1%
Ice cream sandwich2379374.31298%1%
Eclair262162363376%7%
Cupcake3053.7674.34133%8%
Gingerbread35616493.93277%16%
Rows per page:
5
  • 5
  • 10
  • 25
  • All
arrow_drop_down
1-5 of 10

#6 Paginate and sort server-side
If you're loading data from a backend and want to paginate and sort the results before displaying them, you can use the total-items prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the pagination prop to listen for changes. Use the loading prop to display a progress bar while fetching data.
Dessert (100g serving)arrow_upward Caloriesarrow_upward Fat (g)arrow_upward Carbs (g)arrow_upward Protein (g)arrow_upward Sodium (mg)arrow_upward Calcium (%)arrow_upward Iron (%)
No data available
Rows per page:
5
  • 5
  • 10
  • 25
  • All
arrow_drop_down
–

#7 Get data from store for server-side
If you're loading data from a backend and want to paginate and sort the results before displaying them, you can use the total-items prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the pagination prop to listen for changes. Use the loading prop to display a progress bar while fetching data.
Dessert (100g serving)arrow_upward Caloriesarrow_upward Fat (g)arrow_upward Carbs (g)arrow_upward Protein (g)arrow_upward Sodium (mg)arrow_upward Calcium (%)arrow_upward Iron (%)
No data available
Rows per page:
5
  • 5
  • 10
  • 25
  • All
arrow_drop_down
–

© 2017 "BSA Lab." - All Rights Reserved