Tables

Basic Table

Just add classes to your table:

<table class="table table-striped first-td-padding">
    <thead>
        <tr>
           <td>Name</td>
           <td>Email</td>
           <td>City</td>
           <td>Score</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Matthew McCormick</td>
            <td>[email protected]</td>
            <td>Vancouver</td>
            <td>93</td>
        </tr>
    </tbody>
</table>

Colors, Icons, Labels

You can use labels and icons inside of your table:

<table class="table table-striped table-sm color-icon-label-table">
  <thead>
    <tr>
      <td></td>
      <td>Name</td>
      <td>Email</td>
      <td>City</td>
      <td align="right">Score</td>
      <td align="middle"></td>
    </tr>
  </thead>
  <tbody>
    <tr class="table-danger">
      <td>
        <span class="badge badge-pill badge-danger">DANGER</span>
      </td>
      <td>Stanley Hummer</td>
      <td>[email protected]</td>
      <td>Manchester</td>
      <td>57</td>
      <td>
        <i class="fa fa-exclamation-triangle icon-right input-icon error-icon"></i>
      </td>
    </tr>
    <tr class="table-success">
      <td>
        <span class="badge badge-pill badge-primary">SUCCESS</span>
      </td>
      <td>Lendley Wintz</td>
      <td>[email protected]</td>
      <td>Wien</td>
      <td>113</td>
      <td>
        <i class="fa fa-check success-icon icon-right input-icon"></i>
      </td>
    </tr>
    <tr class="table-warning">
      <td>
        <span class="badge badge-pill badge-warning">WARNING</span>
      </td>
      <td>Barbara Noz</td>
      <td>[email protected]</td>
      <td>Brussels</td>
      <td>68</td>
      <td></td>
    </tr>
    <tr class="table-info">
      <td>
        <span class="badge badge-pill badge-info">INFO</span>
      </td>
      <td>Nancy Bo</td>
      <td>[email protected]</td>
      <td>Washington</td>
      <td>280</td>
      <td></td>
    </tr>
  </tbody>
</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!

<data-table :apiUrl="apiUrl"
            :tableFields="tableFields"
            :itemsPerPage="itemsPerPage"
            :sortFunctions="sortFunctions"
            :apiMode="apiMode"
            :paginationPath="paginationPath"></data-table>

data () {
  return {
    apiUrl: 'https://vuetable.ratiw.net/api/users', // Api retuns table data
    apiMode: true, // Choose api mode or just pass array in data-table component
    tableFields: [
       {
         name: '__component:badge-column',
         title: '',
         dataClass: 'text-center'
       },
       {
         name: 'name', // Object property name in your data e.g. (data[0].name)
         sortField: 'name' // Object property name in your data which will be used for sorting
       },
       {
         name: 'email',
         sortField: 'email'
       },
       {
         name: 'address.line2',
         title: 'city' // Title of column
       },
       {
         name: 'salary',
         title: 'score'
       }
    ],
    itemsPerPage: [  // values in dropdown "Items Per Page"
      {
        value: 5
      },
      {
        value: 6
      },
      {
        value: 10
      }
    ]
    sortFunctions: {       // use custom sorting functions for prefered fields
      'name': function (item1, item2) {
        return item1 >= item2 ? 1 : -1
      },
      'email': function (item1, item2) {
        return item1 >= item2 ? 1 : -1
      }
    }
    paginationPath: ''
  }
}

Find DEMOs here!