Basic Table

Just add classes to your table:

  1. <table class="table table-striped first-td-padding">
  2.     <thead>
  3.         <tr>
  4.            <td>Name</td>
  5.            <td>Email</td>
  6.            <td>City</td>
  7.            <td>Score</td>
  8.         </tr>
  9.     </thead>
  10.     <tbody>
  11.         <tr>
  12.             <td>Matthew McCormick</td>
  13.             <td>matthew30@mail.ol</td>
  14.             <td>Vancouver</td>
  15.             <td>93</td>
  16.         </tr>
  17.     </tbody>
  18. </table>

Colors, Icons, Labels

You can use labels and icons inside of your table:

  1. <table class="table table-striped table-sm color-icon-label-table">
  2.   <thead>
  3.     <tr>
  4.       <td></td>
  5.       <td>Name</td>
  6.       <td>Email</td>
  7.       <td>City</td>
  8.       <td align="right">Score</td>
  9.       <td align="middle"></td>
  10.     </tr>
  11.   </thead>
  12.   <tbody>
  13.     <tr class="table-danger">
  14.       <td>
  15.         <span class="badge badge-pill badge-danger">DANGER</span>
  16.       </td>
  17.       <td>Stanley Hummer</td>
  18.       <td>mr_winner_2999@gmail.cb</td>
  19.       <td>Manchester</td>
  20.       <td>57</td>
  21.       <td>
  22.         <i class="fa fa-exclamation-triangle icon-right input-icon error-icon"></i>
  23.       </td>
  24.     </tr>
  25.     <tr class="table-success">
  26.       <td>
  27.         <span class="badge badge-pill badge-primary">SUCCESS</span>
  28.       </td>
  29.       <td>Lendley Wintz</td>
  30.       <td>9938198146@mailster.io</td>
  31.       <td>Wien</td>
  32.       <td>113</td>
  33.       <td>
  34.         <i class="fa fa-check success-icon icon-right input-icon"></i>
  35.       </td>
  36.     </tr>
  37.     <tr class="table-warning">
  38.       <td>
  39.         <span class="badge badge-pill badge-warning">WARNING</span>
  40.       </td>
  41.       <td>Barbara Noz</td>
  42.       <td>barbaranoz@mailster.io</td>
  43.       <td>Brussels</td>
  44.       <td>68</td>
  45.       <td></td>
  46.     </tr>
  47.     <tr class="table-info">
  48.       <td>
  49.         <span class="badge badge-pill badge-info">INFO</span>
  50.       </td>
  51.       <td>Nancy Bo</td>
  52.       <td>nancy@boonweb.com</td>
  53.       <td>Washington</td>
  54.       <td>280</td>
  55.       <td></td>
  56.     </tr>
  57.   </tbody>
  58. </table>
Add classes table-info table-success table-danger or table-warning to highlight row.Use badges inside <td>: <span class="badge badge-pill badge-info">INFO</span>Use icons iside <td> : <i class="fa fa-check success-icon icon-right input-icon"></i>

Search & Pagination

You can use pagination, sorting and filtering in your data-table!

  1. <data-table :apiUrl="apiUrl"
  2.             :tableFields="tableFields"
  3.             :itemsPerPage="itemsPerPage"
  4.             :sortFunctions="sortFunctions"
  5.             :apiMode="apiMode"
  6.             :paginationPath="paginationPath"></data-table>
  7.  
  8. data () {
  9.   return {
  10.     apiUrl: 'https://vuetable.ratiw.net/api/users', // Api retuns table data
  11.     apiMode: true, // Choose api mode or just pass array in data-table component
  12.     tableFields: [
  13.        {
  14.          name: '__component:badge-column',
  15.          title: '',
  16.          dataClass: 'text-center'
  17.        },
  18.        {
  19.          name: 'name', // Object property name in your data e.g. (data[0].name)
  20.          sortField: 'name' // Object property name in your data which will be used for sorting
  21.        },
  22.        {
  23.          name: 'email',
  24.          sortField: 'email'
  25.        },
  26.        {
  27.          name: 'address.line2',
  28.          title: 'city' // Title of column
  29.        },
  30.        {
  31.          name: 'salary',
  32.          title: 'score'
  33.        }
  34.     ],
  35.     itemsPerPage: [  // values in dropdown "Items Per Page"
  36.       {
  37.         value: 5
  38.       },
  39.       {
  40.         value: 6
  41.       },
  42.       {
  43.         value: 10
  44.       }
  45.     ]
  46.     sortFunctions: {       // use custom sorting functions for prefered fields
  47.       'name': function (item1, item2) {
  48.         return item1 >= item2 ? 1 : -1
  49.       },
  50.       'email': function (item1, item2) {
  51.         return item1 >= item2 ? 1 : -1
  52.       }
  53.     }
  54.     paginationPath: ''
  55.   }
  56. }

Find DEMOs here!