Table

Table

The inevitable HTML table, with special case cells

You can create a table simply by attaching a single table CSS class on a <table> HTML element with the following structure:

<table class="table"> as the main container
- thead the optional top part of the table
- tfoot the optional bottom part of the table
- tbody the main content of the table
  - tr each table row
    - th a table cell heading
    - td a table cell

You can set a table row as selected by appending the is-selected modifier on a <tr>

Pos	Team	Pld	W	D	L	GF	GA	GD	Pts	Qualification or relegation
Pos	Team	Pld	W	D	L	GF	GA	GD	Pts	Qualification or relegation
1	Leicester City (C)	38	23	12	3	68	36	+32	81	Qualification for the Champions League group stage
2	Arsenal	38	20	11	7	65	36	+29	71	Qualification for the Champions League group stage
3	Tottenham Hotspur	38	19	13	6	69	35	+34	70	Qualification for the Champions League group stage
4	Manchester City	38	19	9	10	71	41	+30	66	Qualification for the Champions League play-off round
5	Manchester United	38	19	9	10	49	35	+14	66	Qualification for the Europa League group stage
6	Southampton	38	18	9	11	59	41	+18	63	Qualification for the Europa League group stage
7	West Ham United	38	16	14	8	65	51	+14	62	Qualification for the Europa League third qualifying round
8	Liverpool	38	16	12	10	63	50	+13	60
9	Stoke City	38	14	9	15	41	55	−14	51
10	Chelsea	38	12	14	12	59	53	+6	50
11	Everton	38	11	14	13	59	55	+4	47
12	Swansea City	38	12	11	15	42	52	−10	47
13	Watford	38	12	9	17	40	50	−10	45
14	West Bromwich Albion	38	10	13	15	34	48	−14	43
15	Crystal Palace	38	11	9	18	39	51	−12	42
16	AFC Bournemouth	38	11	9	18	45	67	−22	42
17	Sunderland	38	9	12	17	48	62	−14	39
18	Newcastle United (R)	38	9	10	19	44	65	−21	37	Relegation to the Football League Championship
19	Norwich City (R)	38	9	7	22	39	67	−28	34	Relegation to the Football League Championship
20	Aston Villa (R)	38	3	8	27	27	76	−49	17	Relegation to the Football League Championship

<table class="table">
    <thead>
        <tr>
            <th><abbr title="Position">Pos</abbr></th>
            <th>Team</th>
            <th><abbr title="Played">Pld</abbr></th>
            <th><abbr title="Won">W</abbr></th>
            <th><abbr title="Drawn">D</abbr></th>
            <th><abbr title="Lost">L</abbr></th>
            <th><abbr title="Goals for">GF</abbr></th>
            <th><abbr title="Goals against">GA</abbr></th>
            <th><abbr title="Goal difference">GD</abbr></th>
            <th><abbr title="Points">Pts</abbr></th>
            <th>Qualification or relegation</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th><abbr title="Position">Pos</abbr></th>
            <th>Team</th>
            <th><abbr title="Played">Pld</abbr></th>
            <th><abbr title="Won">W</abbr></th>
            <th><abbr title="Drawn">D</abbr></th>
            <th><abbr title="Lost">L</abbr></th>
            <th><abbr title="Goals for">GF</abbr></th>
            <th><abbr title="Goals against">GA</abbr></th>
            <th><abbr title="Goal difference">GD</abbr></th>
            <th><abbr title="Points">Pts</abbr></th>
            <th>Qualification or relegation</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>1</th>
            <td>
                <a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
            </td>
            <td>38</td>
            <td>23</td>
            <td>12</td>
            <td>3</td>
            <td>68</td>
            <td>36</td>
            <td>+32</td>
            <td>81</td>
            <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
        </tr>
        <tr>
            <th>2</th>
            <td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></td>
            <td>38</td>
            <td>20</td>
            <td>11</td>
            <td>7</td>
            <td>65</td>
            <td>36</td>
            <td>+29</td>
            <td>71</td>
            <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
        </tr>
        <tr>
            <th>3</th>
            <td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></td>
            <td>38</td>
            <td>19</td>
            <td>13</td>
            <td>6</td>
            <td>69</td>
            <td>35</td>
            <td>+34</td>
            <td>70</td>
            <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
        </tr>
        <tr class="is-selected">
            <th>4</th>
            <td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
            <td>38</td>
            <td>19</td>
            <td>9</td>
            <td>10</td>
            <td>71</td>
            <td>41</td>
            <td>+30</td>
            <td>66</td>
            <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="2016–17 UEFA Champions League">Champions League play-off round</a></td>
        </tr>
        <tr>
            <th>5</th>
            <td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
            <td>38</td>
            <td>19</td>
            <td>9</td>
            <td>10</td>
            <td>49</td>
            <td>35</td>
            <td>+14</td>
            <td>66</td>
            <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
        </tr>
        <tr>
            <th>6</th>
            <td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
            <td>38</td>
            <td>18</td>
            <td>9</td>
            <td>11</td>
            <td>59</td>
            <td>41</td>
            <td>+18</td>
            <td>63</td>
            <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
        </tr>
        <tr>
            <th>7</th>
            <td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
            <td>38</td>
            <td>16</td>
            <td>14</td>
            <td>8</td>
            <td>65</td>
            <td>51</td>
            <td>+14</td>
            <td>62</td>
            <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
        </tr>
        <tr>
            <th>8</th>
            <td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
            <td>38</td>
            <td>16</td>
            <td>12</td>
            <td>10</td>
            <td>63</td>
            <td>50</td>
            <td>+13</td>
            <td>60</td>
            <td></td>
        </tr>
        <tr>
            <th>9</th>
            <td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
            <td>38</td>
            <td>14</td>
            <td>9</td>
            <td>15</td>
            <td>41</td>
            <td>55</td>
            <td>−14</td>
            <td>51</td>
            <td></td>
        </tr>
        <tr>
            <th>10</th>
            <td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
            <td>38</td>
            <td>12</td>
            <td>14</td>
            <td>12</td>
            <td>59</td>
            <td>53</td>
            <td>+6</td>
            <td>50</td>
            <td></td>
        </tr>
        <tr>
            <th>11</th>
            <td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
            <td>38</td>
            <td>11</td>
            <td>14</td>
            <td>13</td>
            <td>59</td>
            <td>55</td>
            <td>+4</td>
            <td>47</td>
            <td></td>
        </tr>
        <tr>
            <th>12</th>
            <td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
            <td>38</td>
            <td>12</td>
            <td>11</td>
            <td>15</td>
            <td>42</td>
            <td>52</td>
            <td>−10</td>
            <td>47</td>
            <td></td>
        </tr>
        <tr>
            <th>13</th>
            <td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
            <td>38</td>
            <td>12</td>
            <td>9</td>
            <td>17</td>
            <td>40</td>
            <td>50</td>
            <td>−10</td>
            <td>45</td>
            <td></td>
        </tr>
        <tr>
            <th>14</th>
            <td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
            <td>38</td>
            <td>10</td>
            <td>13</td>
            <td>15</td>
            <td>34</td>
            <td>48</td>
            <td>−14</td>
            <td>43</td>
            <td></td>
        </tr>
        <tr>
            <th>15</th>
            <td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
            <td>38</td>
            <td>11</td>
            <td>9</td>
            <td>18</td>
            <td>39</td>
            <td>51</td>
            <td>−12</td>
            <td>42</td>
            <td></td>
        </tr>
        <tr>
            <th>16</th>
            <td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
            <td>38</td>
            <td>11</td>
            <td>9</td>
            <td>18</td>
            <td>45</td>
            <td>67</td>
            <td>−22</td>
            <td>42</td>
            <td></td>
        </tr>
        <tr>
            <th>17</th>
            <td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
            <td>38</td>
            <td>9</td>
            <td>12</td>
            <td>17</td>
            <td>48</td>
            <td>62</td>
            <td>−14</td>
            <td>39</td>
            <td></td>
        </tr>
        <tr>
            <th>18</th>
            <td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
            </td>
            <td>38</td>
            <td>9</td>
            <td>10</td>
            <td>19</td>
            <td>44</td>
            <td>65</td>
            <td>−21</td>
            <td>37</td>
            <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
        </tr>
        <tr>
            <th>19</th>
            <td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
            </td>
            <td>38</td>
            <td>9</td>
            <td>7</td>
            <td>22</td>
            <td>39</td>
            <td>67</td>
            <td>−28</td>
            <td>34</td>
            <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
        </tr>
        <tr>
            <th>20</th>
            <td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
            </td>
            <td>38</td>
            <td>3</td>
            <td>8</td>
            <td>27</td>
            <td>27</td>
            <td>76</td>
            <td>−49</td>
            <td>17</td>
            <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
        </tr>
    </tbody>
</table>

Modifiers

Add borders to all the cells.

table is-bordered

One	Two
Three	Four

Add stripes to the table.

table is-striped

One	Two
Three	Four
Five	Six
Seven	Eight
Nine	Ten
Eleven	Twelve

Make the cells narrower.

table is-narrow

One	Two
Three	Four
Five	Six
Seven	Eight
Nine	Ten
Eleven	Twelve

You can add a hover effect on each row

table is-hoverable

One	Two
Three	Four
Five	Six
Seven	Eight
Nine	Ten
Eleven	Twelve

You can have a fullwidth table.

table is-fullwidth

One	Two
Three	Four
Five	Six
Seven	Eight
Nine	Ten
Eleven	Twelve

You can combine all five modifiers.

table is-bordered is-striped is-narrow is-hoverable is-fullwidth

One	Two
Three	Four
Five	Six
Seven	Eight
Nine	Ten
Eleven	Twelve

<div class="columns">
    <div class="column">
        <p>Add <strong>borders</strong> to all the cells.</p>
    </div>
    <div class="column">
        <code>table is-bordered</code>
    </div>
    <div class="column is-half">
        <table class="table is-bordered">
        <thead>
            <tr>
            <th>One</th>
            <th>Two</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>Three</td>
            <td>Four</td>
            </tr>
        </tbody>
        </table>
    </div>
</div>

<div class="columns">
    <div class="column">
        <p>Add <strong>stripes</strong> to the table.</p>
    </div>
    <div class="column">
        <code>table is-striped</code>
    </div>
    <div class="column is-half">
        <table class="table is-striped">
            <thead>
                <tr>
                    <th>One</th>
                    <th>Two</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Three</td>
                    <td>Four</td>
                </tr>
                <tr>
                    <td>Five</td>
                    <td>Six</td>
                </tr>
                <tr>
                    <td>Seven</td>
                    <td>Eight</td>
                </tr>
                <tr>
                    <td>Nine</td>
                    <td>Ten</td>
                </tr>
                <tr>
                    <td>Eleven</td>
                    <td>Twelve</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="columns">
    <div class="column">
        <p>Make the cells <strong>narrower</strong>.</p>
    </div>
    <div class="column">
        <code>table is-narrow</code>
    </div>
    <div class="column is-half">
        <table class="table is-narrow">
            <thead>
                <tr>
                    <th>One</th>
                    <th>Two</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Three</td>
                    <td>Four</td>
                </tr>
                <tr>
                    <td>Five</td>
                    <td>Six</td>
                </tr>
                <tr>
                    <td>Seven</td>
                    <td>Eight</td>
                </tr>
                <tr>
                    <td>Nine</td>
                    <td>Ten</td>
                </tr>
                <tr>
                    <td>Eleven</td>
                    <td>Twelve</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="columns">
    <div class="column">
        <p>You can add a <strong>hover effect</strong> on each row</p>
    </div>
    <div class="column">
        <code>table is-hoverable</code>
    </div>
    <div class="column is-half">
        <table class="table is-hoverable">
            <thead>
                <tr>
                <th>One</th>
                <th>Two</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Three</td>
                    <td>Four</td>
                </tr>
                <tr>
                    <td>Five</td>
                    <td>Six</td>
                </tr>
                <tr>
                    <td>Seven</td>
                    <td>Eight</td>
                </tr>
                <tr>
                    <td>Nine</td>
                    <td>Ten</td>
                </tr>
                <tr>
                    <td>Eleven</td>
                    <td>Twelve</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="columns">
    <div class="column">
        <p>You can have a <strong>fullwidth</strong> table.</p>
    </div>
    <div class="column">
        <code>table is-fullwidth</code>
    </div>
    <div class="column is-half">
        <table class="table is-fullwidth">
            <thead>
                <tr>
                    <th>One</th>
                    <th>Two</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Three</td>
                    <td>Four</td>
                </tr>
                <tr>
                    <td>Five</td>
                    <td>Six</td>
                </tr>
                <tr>
                    <td>Seven</td>
                    <td>Eight</td>
                </tr>
                <tr>
                    <td>Nine</td>
                    <td>Ten</td>
                </tr>
                <tr>
                    <td>Eleven</td>
                    <td>Twelve</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="columns">
    <div class="column">
        <p>You can <strong>combine</strong> all five modifiers.</p>
    </div>
    <div class="column">
        <code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
    </div>
    <div class="column is-half">
        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
            <thead>
                <tr>
                    <th>One</th>
                    <th>Two</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Three</td>
                    <td>Four</td>
                </tr>
                <tr>
                    <td>Five</td>
                    <td>Six</td>
                </tr>
                <tr>
                    <td>Seven</td>
                    <td>Eight</td>
                </tr>
                <tr>
                    <td>Nine</td>
                    <td>Ten</td>
                </tr>
                <tr>
                    <td>Eleven</td>
                    <td>Twelve</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Table container

You can create a table simply by attaching a single table CSS class on a <table> HTML element with the following structure:

<div class="table-container">
  <table class="table">
    <!-- Your table content -->
  </table>
</div>

To show a data table is very simple, you just need a data and a columns prop.

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

<template>
    <b-table :data="data" :columns="columns"></b-table>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                    { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                    { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                    { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
                ],
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                        width: '40',
                        numeric: true
                    },
                    {
                        field: 'first_name',
                        label: 'First Name',
                    },
                    {
                        field: 'last_name',
                        label: 'Last Name',
                    },
                    {
                        field: 'date',
                        label: 'Date',
                        centered: true
                    },
                    {
                        field: 'gender',
                        label: 'Gender',
                    }
                ]
            }
        }
    }
</script>

Sandbox with custom template

To show a custom row template, you should not use the columns prop, but add it within the scoped slot as a component.

Also you can add an empty named slot to show when there's no data.

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	10/15/2016	Male
2	John	Jacobs	12/15/2016	Male
3	Tina	Gilbert	4/26/2016	Female
4	Clarence	Flores	4/10/2016	Male
5	Anne	Lee	12/6/2016	Female

<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="isBordered">Bordered</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="isStriped">Striped</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="isNarrowed">Narrowed</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="isHoverable">Hoverable</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="isFocusable">Focusable</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="isLoading">Loading state</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="isEmpty">Empty</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="hasMobileCards">Mobile cards <small>(collapsed rows)</small></b-switch>
            </div>
        </b-field>

        <b-table
            :data="isEmpty ? [] : data"
            :bordered="isBordered"
            :striped="isStriped"
            :narrowed="isNarrowed"
            :hoverable="isHoverable"
            :loading="isLoading"
            :focusable="isFocusable"
            :mobile-cards="hasMobileCards">

            <template slot-scope="props">
                <b-table-column field="id" label="ID" width="40" numeric>
                    {{ props.row.id }}
                </b-table-column>

                <b-table-column field="first_name" label="First Name">
                    {{ props.row.first_name }}
                </b-table-column>

                <b-table-column field="last_name" label="Last Name">
                    {{ props.row.last_name }}
                </b-table-column>

                <b-table-column field="date" label="Date" centered>
                    <span class="tag is-success">
                        {{ new Date(props.row.date).toLocaleDateString() }}
                    </span>
                </b-table-column>

                <b-table-column label="Gender">
                    <span>
                        <b-icon pack="fas"
                            :icon="props.row.gender === 'Male' ? 'mars' : 'venus'">
                        </b-icon>
                        {{ props.row.gender }}
                    </span>
                </b-table-column>
            </template>

            <template slot="empty">
                <section class="section">
                    <div class="content has-text-grey has-text-centered">
                        <p>
                            <b-icon
                                icon="emoticon-sad"
                                size="is-large">
                            </b-icon>
                        </p>
                        <p>Nothing here.</p>
                    </div>
                </section>
            </template>
        </b-table>
    </section>
</template>

<script>
    export default {
        data() {
            const data = [
                { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016/10/15 13:43:27', 'gender': 'Male' },
                { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016/12/15 06:00:53', 'gender': 'Male' },
                { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016/04/26 06:26:28', 'gender': 'Female' },
                { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016/04/10 10:28:46', 'gender': 'Male' },
                { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016/12/06 14:38:38', 'gender': 'Female' }
            ]

            return {
                data,
                isEmpty: false,
                isBordered: false,
                isStriped: false,
                isNarrowed: false,
                isHoverable: false,
                isFocusable: false,
                isLoading: false,
                hasMobileCards: true
            }
        }
    }
</script>

Selection

You can show a single selected row by passing the corresponding object to the selected prop. Additionally, adding the .sync modifier will make it two-way binding — selected object will mutate if user clicks on row.

Use focusable prop make table to be focused and navigable with a keyboard using arrow keys.

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

{
  "id": 2,
  "first_name": "John",
  "last_name": "Jacobs",
  "date": "2016-12-15 06:00:53",
  "gender": "Male"
}

<template>
    <section>
        <button class="button field is-danger" @click="selected = null"
            :disabled="!selected">
            <b-icon icon="times"></b-icon>
            <span>Clear selected</span>
        </button>

        <b-tabs>
            <b-tab-item label="Table">
                <b-table
                    :data="data"
                    :columns="columns"
                    :selected.sync="selected"
                    focusable>
                </b-table>
            </b-tab-item>

            <b-tab-item label="Selected">
                <pre>{{ selected }}</pre>
            </b-tab-item>
        </b-tabs>
    </section>
</template>

<script>
    export default {
        data() {
            const data = [
                { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
            ]

            return {
                data,
                selected: data[1],
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                        width: '40',
                        numeric: true
                    },
                    {
                        field: 'first_name',
                        label: 'First Name',
                    },
                    {
                        field: 'last_name',
                        label: 'Last Name',
                    },
                    {
                        field: 'date',
                        label: 'Date',
                        centered: true
                    },
                    {
                        field: 'gender',
                        label: 'Gender',
                    }
                ]
            }
        }
    }
</script>

Checkable

You can add checkboxes to rows by using the checkable prop.

To show which rows are checked, you have to pass the corresponding object array to the checked-rows prop. Adding the .sync modifier will make it two-way binding — checked object array will mutate if user clicks on checkboxes.

A slot called bottom-left is available whenever the table is checkable or paginated, you can add anything in there.

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

Total checked: 2

[
  {
    "id": 2,
    "first_name": "John",
    "last_name": "Jacobs",
    "date": "2016-12-15 06:00:53",
    "gender": "Male"
  },
  {
    "id": 4,
    "first_name": "Clarence",
    "last_name": "Flores",
    "date": "2016-04-10 10:28:46",
    "gender": "Male"
  }
]

<template>
    <section>
        <b-field grouped group-multiline>
            <button class="button field is-danger" @click="checkedRows = []"
                :disabled="!checkedRows.length">
                <b-icon icon="times"></b-icon>
                <span>Clear checked</span>
            </button>
            <b-select v-model="checkboxPosition">
                <option value="left">Checkbox at left</option>
                <option value="right">Checkbox at right</option>
            </b-select>
        </b-field>

        <b-tabs>
            <b-tab-item label="Table">
                <b-table
                    :data="data"
                    :columns="columns"
                    :checked-rows.sync="checkedRows"
                    :is-row-checkable="(row) => row.id !== 3 && row.id !== 4"
                    checkable
                    :checkbox-position="checkboxPosition">

                    <template slot="bottom-left">
                        <b>Total checked</b>: {{ checkedRows.length }}
                    </template>
                </b-table>
            </b-tab-item>

            <b-tab-item label="Checked rows">
                <pre>{{ checkedRows }}</pre>
            </b-tab-item>
        </b-tabs>
    </section>
</template>

<script>
    export default {
        data() {
            const data = [
                { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
            ]

            return {
                data,
                checkboxPosition: 'left',
                checkedRows: [data[1], data[3]],
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                        width: '40',
                        numeric: true
                    },
                    {
                        field: 'first_name',
                        label: 'First Name',
                    },
                    {
                        field: 'last_name',
                        label: 'Last Name',
                    },
                    {
                        field: 'date',
                        label: 'Date',
                        centered: true
                    },
                    {
                        field: 'gender',
                        label: 'Gender',
                    }
                ]
            }
        }
    }
</script>

Searchable

You can add search filtering to rows by using the searchable prop.

This feature is not available on mobile when mobile-card.

ID	First Name	Last Name	Date	Gender

1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

You can also customize the search input using a scoped slot.

ID	First Name	Last Name	Date	Gender

1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

<template>
    <section>
        <b-table
            :data="data"
            :columns="columns">
        </b-table>
        <hr />
        <p>You can also customize the search input using a scoped slot.</p>
        <b-table
            :data="data">
            <template slot-scope="props">
                <template v-for="column in columns">
                    <b-table-column :key="column.id" v-bind="column">
                        <template
                            v-if="column.searchable && !column.numeric"
                            slot="searchable"
                            slot-scope="props">
                            <b-input
                                v-model="props.filters[props.column.field]"
                                placeholder="Search..."
                                icon="search"
                                size="is-small" />
                        </template>
                        {{ props.row[column.field] }}
                    </b-table-column>
                </template>
            </template>
        </b-table>
    </section>
</template>

 <script>
    export default {
        data() {
            return {
                data: [
                    { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                    { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                    { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                    { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
                ],
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                        width: '100',
                        numeric: true,
                        searchable: true,
                    },
                    {
                        field: 'first_name',
                        label: 'First Name',
                        searchable: true,
                    },
                    {
                        field: 'last_name',
                        label: 'Last Name',
                        searchable: true,
                    },
                    {
                        field: 'date',
                        label: 'Date',
                        centered: true
                    },
                    {
                        field: 'gender',
                        label: 'Gender',
                    }
                ]
            }
        }
    }
</script>

Pagination and sorting

To make a column sortable, add the sortable prop on it and specify a field name.

You can also use the default-sort prop to determine the default sort column and order. The column must be sortable to work.

The default-sort-direction prop can be set to determine the default sort column direction on the first click.

A slot called bottom-left is available whenever the table is checkable or paginated, you can add anything in there.

Paginated

Simple pagination

ID	First Name	Last Name	Date	Gender
30	Alan	Mendoza	4/22/2016	Male
57	Alan	Edwards	3/22/2017	Male
20	Albert	Mendoza	8/8/2016	Male
45	Andrea	Marshall	9/4/2016	Female
8	Andrew	Greene	11/20/2016	Male

<template>
    <section>
        <b-field grouped group-multiline>
            <b-select v-model="defaultSortDirection">
                <option value="asc">Default sort direction: ASC</option>
                <option value="desc">Default sort direction: DESC</option>
            </b-select>
            <b-select v-model="perPage" :disabled="!isPaginated">
                <option value="5">5 per page</option>
                <option value="10">10 per page</option>
                <option value="15">15 per page</option>
                <option value="20">20 per page</option>
            </b-select>
            <div class="control">
                <button class="button" @click="currentPage = 2" :disabled="!isPaginated">Set page to 2</button>
            </div>
            <div class="control is-flex">
                <b-switch v-model="isPaginated">Paginated</b-switch>
            </div>
            <div class="control is-flex">
                <b-switch v-model="isPaginationSimple" :disabled="!isPaginated">Simple pagination</b-switch>
            </div>
            <b-select v-model="paginationPosition" :disabled="!isPaginated">
                <option value="bottom">bottom pagination</option>
                <option value="top">top pagination</option>
                <option value="both">both</option>
            </b-select>
            <b-select v-model="sortIcon">
                <option value="arrow-up">Arrow sort icon</option>
                <option value="caret-up">Caret sort icon</option>
                <option value="chevron-up">Chevron sort icon </option>
            </b-select>
            <b-select v-model="sortIconSize">
                <option value="is-small">Small sort icon</option>
                <option value="">Regular sort icon</option>
                <option value="is-medium">Medium sort icon</option>
                <option value="is-large">Large sort icon</option>
            </b-select>
        </b-field>

        <b-table
            :data="data"
            :paginated="isPaginated"
            :per-page="perPage"
            :current-page.sync="currentPage"
            :pagination-simple="isPaginationSimple"
            :pagination-position="paginationPosition"
            :default-sort-direction="defaultSortDirection"
            :sort-icon="sortIcon"
            :sort-icon-size="sortIconSize"
            default-sort="user.first_name"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page">

            <template slot-scope="props">
                <b-table-column field="id" label="ID" width="40" sortable numeric>
                    {{ props.row.id }}
                </b-table-column>

                <b-table-column field="user.first_name" label="First Name" sortable>
                    {{ props.row.user.first_name }}
                </b-table-column>

                <b-table-column field="user.last_name" label="Last Name" sortable>
                    {{ props.row.user.last_name }}
                </b-table-column>

                <b-table-column field="date" label="Date" sortable centered>
                    <span class="tag is-success">
                        {{ new Date(props.row.date).toLocaleDateString() }}
                    </span>
                </b-table-column>

                <b-table-column label="Gender">
                    <span>
                        <b-icon pack="fas"
                            :icon="props.row.gender === 'Male' ? 'mars' : 'venus'">
                        </b-icon>
                        {{ props.row.gender }}
                    </span>
                </b-table-column>
            </template>
        </b-table>
    </section>
</template>

<script>
    const data = require('@data/sample.json')

    export default {
        data() {
            return {
                data,
                isPaginated: true,
                isPaginationSimple: false,
                paginationPosition: 'bottom',
                defaultSortDirection: 'asc',
                sortIcon: 'arrow-up',
                sortIconSize: 'is-small',
                currentPage: 1,
                perPage: 5
            }
        }
    }
</script>

Sorting multiple

To sort on additional columns, use sort-multiple is enabled

Use $refs.YOURREF.resetMultiSorting() to reset the current multi column sorting

Use sort-multiple-data prop together with backend-sorting if you want to use a custom sorting priority

Use sort-multiple-key prop if you only want to enable multi column sorting when it is in combination with a key. Use value null to have it always enabled (default if not specified)

Sort multiple rows

Reset sorting

Backend sorting

First name	Last name	Team
Abbie	Archer	Team B
Abbie	Smith	Team A
Jones	Smith	Team C
Abbie	Archer	Team A

<template>
  <div>
    <b-field grouped group-multiline>
      <div class="control is-flex">
        <b-switch v-model="multiColumnSortingEnabled" @input="resetPriority">Sort multiple rows</b-switch>
      </div>
      <div class="control is-flex">
        <span class="button" :disabled="!multiColumnSortingEnabled" @click="resetPriority">Reset sorting</span>
      </div>
      <div class="control is-flex">
        <b-select v-model="customKey" :disabled="!multiColumnSortingEnabled">
          <option :value="null">None</option>
          <option value="shiftKey">Shift</option>
          <option value="altKey">Alt/Option</option>
          <option value="ctrlKey">Control</option>
        </b-select>
      </div>
      <div class="control is-flex">
        <b-switch v-model="backendSortingEnabled" @input="resetPriority">Backend sorting</b-switch>
      </div>
    </b-field>
    <b-table 
      :data="data"
      ref="multiSortTable"
      :backend-sorting="backendSortingEnabled"
      @sort="sortPressed"
      @sorting-priority-removed="sortingPriorityRemoved"
      
      :sort-multiple="multiColumnSortingEnabled"
      :sort-multiple-data="sortingPrioirty"
      :sort-multiple-key="customKey"
    >
      <template slot-scope="props">
        <b-table-column field="first_name" label="First name" sortable>
            {{ props.row.first_name }}
        </b-table-column>
        <b-table-column field="last_name" label="Last name" sortable>
            {{ props.row.last_name }}
        </b-table-column>
        <b-table-column field="team" label="Team" sortable>
            {{ props.row.team }}
        </b-table-column>
      </template>
    </b-table>
  </div>
</template>

<script>
import orderBy from 'lodash/orderBy'

const dataSource = [
  { 'id': 1, 'first_name': 'Abbie', 'last_name': 'Archer', 'team': 'Team B'},
  { 'id': 2, 'first_name': 'Abbie', 'last_name': 'Smith', 'team': 'Team A'},
  { 'id': 3, 'first_name': 'Jones', 'last_name': 'Smith', 'team': 'Team C'},
  { 'id': 4, 'first_name': 'Abbie', 'last_name': 'Archer', 'team': 'Team A'}
]
  export default {
      data() {
          return {
            customKey: null,
            backendSortingEnabled: false,
            multiColumnSortingEnabled: true,
            data: [],
            sortingPrioirty: []
          }
      },
      methods: {
        resetPriority(){
          this.$refs.multiSortTable.resetMultiSorting()

          // reset local backend sorting
          if(this.backendSortingEnabled) {
            this.sortingPrioirty = []
            this.loadAsyncData()
          }
        },

        // Backend sorting
        sortingPriorityRemoved(field){
          this.sortingPrioirty = this.sortingPrioirty.filter(
            (priority) => priority.field !== field)
          this.loadAsyncData(this.sortingPrioirty)
        },

        sortPressed(field, order, event) {
          if(this.backendSortingEnabled) {
            if(this.multiColumnSortingEnabled){
              if((this.customKey && event[this.customKey]) || !this.customKey) {
                let existingPriority = this.sortingPrioirty.find(i => i.field === field)
                if(existingPriority) {
                  existingPriority.order = existingPriority.order === 'desc' ? 'asc' : 'desc'
                } else {
                  // request sorted data from backend
                  this.sortingPrioirty.push({field, order})
                }
                this.loadAsyncData(this.sortingPrioirty)
              } else {
                // request regular sorted data from backend
                this.sortingPrioirty = [] // [{field, order}]
                this.loadAsyncData([{field, order}])
              }
            }
          }
        },

        // "API request" for data
        async loadAsyncData(sortingPrioirty = []) {
          let mockdata = JSON.parse(JSON.stringify(dataSource));
          // get data already sorted from the backend using sortingPriority
          this.data = orderBy(mockdata, sortingPrioirty.map(i => i.field), sortingPrioirty.map(i => i.order))
        }
      },
      created () {
        this.data = JSON.parse(JSON.stringify(dataSource));
      }
  }
</script>

Detailed rows

You can have detailed rows by adding a detail named scoped slot and the detailed prop.

You can also toggle row detail programmatically using toggleDetails method and :show-detail-icon="false" if you want to hide chevron icon.

Show detail icon

	ID	First Name	Last Name	Date	Gender
	1	Jesse	Simmons	10/15/2016	Male
Jesse Simmons @Jesse 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
	2	John	Jacobs	12/15/2016	Male
	3	Tina	Gilbert	4/26/2016	Female
	4	Clarence	Flores	4/10/2016	Male
	5	Anne	Lee	12/6/2016	Female

<template>
    <section>

        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="showDetailIcon">Show detail icon</b-switch>
            </div>
        </b-field>

        <b-table
            :data="data"
            ref="table"
            paginated
            per-page="5"
            :opened-detailed="defaultOpenedDetails"
            detailed
            detail-key="id"
            @details-open="(row, index) => $buval.toast.open(`Expanded ${row.user.first_name}`)"
            :show-detail-icon="showDetailIcon"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page">

            <template slot-scope="props">
                <b-table-column field="id" label="ID" width="40" numeric>
                    {{ props.row.id }}
                </b-table-column>

                <b-table-column field="user.first_name" label="First Name" sortable>
                    <template v-if="showDetailIcon">
                        {{ props.row.user.first_name }}
                    </template>
                    <template v-else>
                        <a @click="toggle(props.row)">
                            {{ props.row.user.first_name }}
                        </a>
                    </template>
                </b-table-column>

                <b-table-column field="user.last_name" label="Last Name" sortable>
                    {{ props.row.user.last_name }}
                </b-table-column>

                <b-table-column field="date" label="Date" sortable centered>
                    <span class="tag is-success">
                        {{ new Date(props.row.date).toLocaleDateString() }}
                    </span>
                </b-table-column>

                <b-table-column label="Gender">
                    <span>
                        <b-icon pack="fas"
                            :icon="props.row.gender === 'Male' ? 'mars' : 'venus'">
                        </b-icon>
                        {{ props.row.gender }}
                    </span>
                </b-table-column>
            </template>

            <template slot="detail" slot-scope="props">
                <article class="media">
                    <figure class="media-left">
                        <p class="image is-64x64">
                            <img src="/static/img/placeholders/128x128.png">
                        </p>
                    </figure>
                    <div class="media-content">
                        <div class="content">
                            <p>
                                <strong>{{ props.row.user.first_name }} {{ props.row.user.last_name }}</strong>
                                <small>@{{ props.row.user.first_name }}</small>
                                <small>31m</small>
                                <br>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
                                Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
                            </p>
                        </div>
                    </div>
                </article>
            </template>
        </b-table>

    </section>
</template>

<script>
    const data = require('@data/sample.json')

    export default {
        data() {
            return {
                data,
                defaultOpenedDetails: [1],
                showDetailIcon: true
            }
        },
        methods: {
            toggle(row) {
                this.$refs.table.toggleDetails(row)
            }
        }
    }
</script>

Custom Detailed rows

You can add anything you like into the detail named scoped by providing the customDetailRow prop to the table.

Be cautious when using a custom detailed row and toggling the display of columns, as you will have to manage either the content within (with colspan) or the columns themselves dependent on the content displayed.

Detail column

Name

Stock Sold

Stock Available

Stock Cleared

Name	Stock Sold	Stock Available	Stock Cleared
Board Games	131	301	44%
Monopoly	57	100	57%
Scrabble	23	84	27%
Chess	37	61	61%
Battleships	14	56	25%
Books	434	721	60%
Jigsaws & Puzzles	88	167	53%

<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-checkbox v-model="showDetailIcon">Detail column</b-checkbox>
            </div>
            <div v-for="(column, index) in columnsVisible"
                 :key="index"
                 class="control">
                <b-checkbox v-model="column.display">
                    {{ column.title }}
                </b-checkbox>
            </div>
        </b-field>

        <b-table
            :data="data"
            ref="table"
            detailed
            hoverable
            custom-detail-row
            :opened-detailed="['Board Games']"
            :default-sort="['name', 'asc']"
            detail-key="name"
            @details-open="(row, index) => $buval.toast.open(`Expanded ${row.name}`)"
            :show-detail-icon="showDetailIcon">

            <template slot-scope="props">
                <b-table-column
                    field="name"
                    :visible="columnsVisible['name'].display"
                    :label="columnsVisible['name'].title"
                    width="300"
                    sortable
                >
                    <template v-if="showDetailIcon">
                        {{ props.row.name }}
                    </template>
                    <template v-else>
                        <a @click="toggle(props.row)">
                            {{ props.row.name }}
                        </a>
                    </template>
                </b-table-column>

                <b-table-column
                    field="sold"
                    :visible="columnsVisible['sold'].display"
                    :label="columnsVisible['sold'].title"
                    sortable
                    centered
                >
                    {{ props.row.sold }}
                </b-table-column>

                <b-table-column
                    field="available"
                    :visible="columnsVisible['available'].display"
                    :label="columnsVisible['available'].title"
                    sortable
                    centered
                >
                    {{ props.row.available }}
                </b-table-column>

                <b-table-column
                    :visible="columnsVisible['cleared'].display"
                    :label="columnsVisible['cleared'].title"
                    centered
                >
                    <span :class="
                            [
                                'tag',
                                {'is-danger': props.row.sold / props.row.available <= 0.45},
                                {'is-success': props.row.sold / props.row.available > 0.45}
                            ]">
                        {{ Math.round((props.row.sold / props.row.available) * 100) }}%
                    </span>
                </b-table-column>
            </template>

            <template slot="detail" slot-scope="props">
                <tr v-for="item in props.row.items" :key="item.name">
                    <td v-if="showDetailIcon"></td>
                    <td v-show="columnsVisible['name'].display" >&nbsp;&nbsp;&nbsp;&nbsp;{{ item.name }}</td>
                    <td v-show="columnsVisible['sold'].display" class="has-text-centered">{{ item.sold }}</td>
                    <td v-show="columnsVisible['available'].display" class="has-text-centered">{{ item.available }}</td>
                    <td v-show="columnsVisible['cleared'].display" class="has-text-centered">
                        <span :class="
                            [
                                'tag',
                                {'is-danger': item.sold / item.available <= 0.45},
                                {'is-success': item.sold / item.available > 0.45}
                            ]">
                            {{ Math.round((item.sold / item.available) * 100) }}%
                        </span>
                    </td>
                </tr>
            </template>
        </b-table>

    </section>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    {
                        name: 'Board Games',
                        sold: 131,
                        available: 301,
                        items: [
                            {
                                name: 'Monopoly',
                                sold: 57,
                                available: 100
                            },
                            {
                                name: 'Scrabble',
                                sold: 23,
                                available: 84
                            },
                            {
                                name: 'Chess',
                                sold: 37,
                                available: 61
                            },
                            {
                                name: 'Battleships',
                                sold: 14,
                                available: 56
                            }
                        ]
                    },
                    {
                        name: 'Jigsaws & Puzzles',
                        sold: 88,
                        available: 167,
                        items: [
                            {
                                name: 'World Map',
                                sold: 31,
                                available: 38
                            },
                            {
                                name: 'London',
                                sold: 23,
                                available: 29
                            },
                            {
                                name: 'Sharks',
                                sold: 20,
                                available: 44
                            },
                            {
                                name: 'Disney',
                                sold: 14,
                                available: 56
                            }
                        ]
                    },
                    {
                        name: 'Books',
                        sold: 434,
                        available: 721,
                        items: [
                            {
                                name: 'Hamlet',
                                sold: 101,
                                available: 187
                            },
                            {
                                name: 'The Lord Of The Rings',
                                sold: 85,
                                available: 156
                            },
                            {
                                name: 'To Kill a Mockingbird',
                                sold: 78,
                                available: 131
                            },
                            {
                                name: 'Catch-22',
                                sold: 73,
                                available: 98
                            },
                            {
                                name: 'Frankenstein',
                                sold: 51,
                                available: 81
                            },
                            {
                                name: 'Alice\'s Adventures In Wonderland',
                                sold: 46,
                                available: 68
                            }
                        ]
                    }
                ],
                columnsVisible: {
                    name: { title: 'Name', display: true },
                    sold: { title: 'Stock Sold', display: true },
                    available: { title: 'Stock Available', display: true },
                    cleared: { title: 'Stock Cleared', display: true },
                },
                showDetailIcon: true
            }
        },
        methods: {
            toggle(row) {
                this.$refs.table.toggleDetails(row)
            }
        }
    }
</script>

Row status

Use the row-class prop to return a class name. It's a function that receives row and index parameters.

Note that you have to style the class yourself.

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

<template>
    <b-table
        :data="data"
        :columns="columns"
        :row-class="(row, index) => row.id === 1 && 'is-info'">
    </b-table>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                    { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                    { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                    { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
                ],
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                        width: '40',
                        numeric: true
                    },
                    {
                        field: 'first_name',
                        label: 'First Name',
                    },
                    {
                        field: 'last_name',
                        label: 'Last Name',
                    },
                    {
                        field: 'date',
                        label: 'Date',
                        centered: true
                    },
                    {
                        field: 'gender',
                        label: 'Gender',
                    }
                ]
            }
        }
    }
</script>

<style>
    tr.is-info {
        background: #167df0;
        color: #fff;
    }
</style>

Custom headers

By adding a scoped slot named header in table component you can customize the headers. Use the meta prop on column to pass anything you may need.

Previous scoped slot named header in table will be deprecated.

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	10/15/2016	Male
2	John	Jacobs	12/15/2016	Male
3	Tina	Gilbert	4/26/2016	Female
4	Clarence	Flores	4/10/2016	Male
5	Anne	Lee	12/6/2016	Female

<template>
    <b-table :data="data">
        <template slot-scope="props">
            <b-table-column field="id" label="ID" width="40" numeric>
                <template slot="header" slot-scope="{ column }">
                    <b-tooltip :label="column.label" dashed>
                        {{ column.label }}
                    </b-tooltip>
                </template> 
                {{ props.row.id }}
            </b-table-column>

            <b-table-column field="user.first_name" label="First Name">
                <template slot="header" slot-scope="{ column }">
                    <b-tooltip :label="column.label" dashed>
                        {{ column.label }}
                    </b-tooltip>
                </template>
                {{ props.row.first_name }}
            </b-table-column>

            <b-table-column field="user.last_name" label="Last Name">
                <template slot="header" slot-scope="{ column }">
                    <b-tooltip :label="column.label" dashed>
                        {{ column.label }}
                    </b-tooltip>
                </template>
                {{ props.row.last_name }}
            </b-table-column>

            <b-table-column field="date" label="Date" centered>
                <span class="tag is-success">
                    {{ new Date(props.row.date).toLocaleDateString() }}
                </span>
            </b-table-column>

            <b-table-column label="Gender">
                <span>
                    <b-icon pack="fas"
                        :icon="props.row.gender === 'Male' ? 'mars' : 'venus'">
                    </b-icon>
                    {{ props.row.gender }}
                </span>
            </b-table-column>
        </template>
    </b-table>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                    { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                    { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                    { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
                ]
            }
        }
    }
</script>

Subheadings

Use the subheading prop on columns to add subheadings. This is particularly useful to display a summary when dealing with long tables.

By adding a scoped slot named subheading in table component you can customize the subheadings.

ID	Contributor	Posts	Comments
Total:		18	60
1	Jesse Simmons	2	5
2	John Jacobs	11	42
3	Tina Gilbert	0	7
4	Clarence Flores	4	4
5	Anne Lee	1	2

<template>
    <section>
        <b-table
            :data="data"
            :columns="columns">
        </b-table>
    </section>
</template>

 <script>
    export default {
        data() {
            return {
                data: [
                    { 'id': 1, 'contributor': 'Jesse Simmons', 'posts': 2, 'comments': 5 },
                    { 'id': 2, 'contributor': 'John Jacobs', 'posts': 11, 'comments': 42 },
                    { 'id': 3, 'contributor': 'Tina Gilbert', 'posts': 0, 'comments': 7 },
                    { 'id': 4, 'contributor': 'Clarence Flores', 'posts': 4, 'comments': 4 },
                    { 'id': 5, 'contributor': 'Anne Lee', 'posts': 1, 'comments': 2 }
                ],
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                        width: '100',
                        numeric: true,
                        subheading: 'Total:'
                    },
                    {
                        field: 'contributor',
                        label: 'Contributor',
                    },
                    {
                        field: 'posts',
                        label: 'Posts',
                        subheading: 18
                    },
                    {
                        field: 'comments',
                        label: 'Comments',
                        subheading: 60
                    }
                ]
            }
        }
    }
</script>

Toggle columns

Always use the visible prop to hide/show columns, and NOT v-if or v-show.

First Name

Last Name

Date

Gender

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

<template>
    <section>
        <b-field grouped group-multiline>
            <div v-for="(column, index) in columnsTemplate" 
                :key="index"
                class="control">
                <b-checkbox v-model="column.visible">
                    {{ column.title }}
                </b-checkbox>
            </div>
        </b-field>

        <b-table :data="tableDataSimple">
            <template slot-scope="props">
                <b-table-column v-for="(column, index) in columnsTemplate"
                    :key="index"
                    :label="column.title"
                    :visible="column.visible">
                    {{ props.row[column.field] }}
                </b-table-column>
            </template>
        </b-table>
    </section>
</template>

<script>
    export default {
        data() {
            const tableDataSimple = [
                { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
            ]

            return {
                tableDataSimple,
                columnsTemplate: [
                    { title: 'ID', field: 'id', visible: true },
                    { title: 'First Name', field: 'first_name', visible: true },
                    { title: 'Last Name', field: 'last_name', visible: true },
                    { title: 'Date', field: 'date', visible: true },
                    { title: 'Gender', field: 'gender', visible: true }
                ]
            }
        }
    }
</script>

Footer

Custom

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	10/15/2016	Male
2	John	Jacobs	12/15/2016	Male
3	Tina	Gilbert	4/26/2016	Female
4	Clarence	Flores	4/10/2016	Male
5	Anne	Lee	12/6/2016	Female
Footer

<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="isCustom">Custom</b-switch>
            </div>
        </b-field>
        <b-table :data="tableDataSimple">

            <template slot-scope="props">
                <b-table-column label="ID" width="40" numeric>
                    {{ props.row.id }}
                </b-table-column>

                <b-table-column label="First Name">
                    {{ props.row.first_name }}
                </b-table-column>

                <b-table-column label="Last Name">
                    {{ props.row.last_name }}
                </b-table-column>

                <b-table-column label="Date" centered>
                    {{ new Date(props.row.date).toLocaleDateString() }}
                </b-table-column>

                <b-table-column label="Gender">
                    {{ props.row.gender }}
                </b-table-column>
            </template>

            <template slot="footer" v-if="!isCustom">
                <div class="has-text-right">
                    Footer
                </div>
            </template>
            <template slot="footer" v-else>
                <th class="is-hidden-mobile" style="width:40px">
                    <div class="th-wrap is-numeric"> ID </div>
                </th>
                <th class="is-hidden-mobile">
                    <div class="th-wrap"> First Name </div>
                </th>
                <th class="is-hidden-mobile">
                    <div class="th-wrap"> Last Name </div>
                </th>
                <th class="is-hidden-mobile">
                    <div class="th-wrap is-centered"> Date </div>
                </th>
                <th class="is-hidden-mobile">
                    <div class="th-wrap"> Gender </div>
                </th>
            </template>

        </b-table>
    </section>
</template>

<script>
    export default {
        data() {
            const tableDataSimple = [
                { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016/10/15 13:43:27', 'gender': 'Male' },
                { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016/12/15 06:00:53', 'gender': 'Male' },
                { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016/04/26 06:26:28', 'gender': 'Female' },
                { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016/04/10 10:28:46', 'gender': 'Male' },
                { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016/12/06 14:38:38', 'gender': 'Female' }
            ]

            return {
                tableDataSimple,
                isCustom: false
            }
        }
    }
</script>

Async data

Use backend-sorting and backend-pagination props to let those tasks to the backend, then manage it with page-change and sort events.

API from TMDb.

Title	Vote Average	Vote Count	Release Date	Overview
Inception	8.3	26339	7/15/2010	Cobb, a skilled thief who commits corporate espionage by infiltrating the subcon...
Deadpool	7.6	23110	2/9/2016	Deadpool tells the origin story of former Special Forces operative turned mercen...
Interstellar	8.3	22900	11/5/2014	The adventures of a group of explorers who make use of a newly discovered wormho...
The Avengers	7.7	22674	4/25/2012	When an unexpected enemy emerges and threatens global safety and security, Nick ...
The Dark Knight	8.4	22652	7/16/2008	Batman raises the stakes in his war on crime. With the help of Lt. Jim Gordon an...
Avatar	7.4	21596	12/10/2009	In the 22nd century, a paraplegic Marine is dispatched to the moon Pandora on a ...
Guardians of the Galaxy	7.9	20785	7/30/2014	Light years from Earth, 26 years after being abducted, Peter Quill finds himself...
Fight Club	8.4	19522	10/15/1999	A ticking-time-bomb insomniac and a slippery soap salesman channel primal male a...
Pulp Fiction	8.5	19015	9/10/1994	A burger-loving hit man, his philosophical partner, a drug-addled gangster's mol...
Avengers: Infinity War	8.3	18751	4/25/2018	As the Avengers and their allies have continued to protect the world from threat...
Django Unchained	8.1	18627	12/25/2012	With the help of a German bounty hunter, a freed slave sets out to rescue his wi...
Iron Man	7.6	18606	4/30/2008	After being held captive in an Afghan cave, billionaire engineer Tony Stark crea...
Forrest Gump	8.4	18322	7/6/1994	A man with a low IQ has accomplished great things in his life and been present d...
Harry Potter and the Philosopher's Stone	7.9	17337	11/16/2001	Harry Potter has lived under the stairs at his aunt and uncle's house his whole ...
The Lord of the Rings: The Fellowship of the Ring	8.3	17306	12/18/2001	Young hobbit Frodo Baggins, after inheriting a mysterious ring from his uncle Bi...
The Matrix	8.1	17308	3/30/1999	Set in the 22nd century, The Matrix tells the story of a computer hacker who joi...
Titanic	7.8	17236	11/18/1997	101-year-old Rose DeWitt Bukater tells the story of her life aboard the Titanic,...
The Shawshank Redemption	8.7	16606	9/23/1994	Framed in the 1940s for the double murder of his wife and her lover, upstanding ...
Mad Max: Fury Road	7.5	16601	5/13/2015	An apocalyptic story set in the furthest reaches of our planet, in a stark deser...
The Hunger Games	7.1	16572	3/12/2012	Every year in the ruins of what was once North America, the nation of Panem forc...

<template>
    <section>
        <b-table
            :data="data"
            :loading="loading"

            paginated
            backend-pagination
            :total="total"
            :per-page="perPage"
            @page-change="onPageChange"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page"

            backend-sorting
            :default-sort-direction="defaultSortOrder"
            :default-sort="[sortField, sortOrder]"
            @sort="onSort">

            <template slot-scope="props">
                <b-table-column field="original_title" label="Title" sortable>
                    {{ props.row.original_title }}
                </b-table-column>

                <b-table-column field="vote_average" label="Vote Average" numeric sortable>
                    <span class="tag" :class="type(props.row.vote_average)">
                        {{ props.row.vote_average }}
                    </span>
                </b-table-column>

                <b-table-column field="vote_count" label="Vote Count" numeric sortable>
                     {{ props.row.vote_count }}
                </b-table-column>

                <b-table-column field="release_date" label="Release Date" sortable centered>
                    {{ props.row.release_date ? new Date(props.row.release_date).toLocaleDateString() : 'unknown' }}
                </b-table-column>

                <b-table-column label="Overview" width="500">
                    {{ props.row.overview | truncate(80) }}
                </b-table-column>
            </template>
        </b-table>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                data: [],
                total: 0,
                loading: false,
                sortField: 'vote_count',
                sortOrder: 'desc',
                defaultSortOrder: 'desc',
                page: 1,
                perPage: 20
            }
        },
        methods: {
            /*
        * Load async data
        */
            loadAsyncData() {
                const params = [
                    'api_key=bb6f51bef07465653c3e553d6ab161a8',
                    'language=en-US',
                    'include_adult=false',
                    'include_video=false',
                    `sort_by=${this.sortField}.${this.sortOrder}`,
                    `page=${this.page}`
                ].join('&')

                this.loading = true
                this.$http.get(`https://api.themoviedb.org/3/discover/movie?${params}`)
                    .then(({ data }) => {
                        // api.themoviedb.org manage max 1000 pages
                        this.data = []
                        let currentTotal = data.total_results
                        if (data.total_results / this.perPage > 1000) {
                            currentTotal = this.perPage * 1000
                        }
                        this.total = currentTotal
                        data.results.forEach((item) => {
                            item.release_date = item.release_date ? item.release_date.replace(/-/g, '/') : null
                            this.data.push(item)
                        })
                        this.loading = false
                    })
                    .catch((error) => {
                        this.data = []
                        this.total = 0
                        this.loading = false
                        throw error
                    })
            },
            /*
        * Handle page-change event
        */
            onPageChange(page) {
                this.page = page
                this.loadAsyncData()
            },
            /*
        * Handle sort event
        */
            onSort(field, order) {
                this.sortField = field
                this.sortOrder = order
                this.loadAsyncData()
            },
            /*
        * Type style in relation to the value
        */
            type(value) {
                const number = parseFloat(value)
                if (number < 6) {
                    return 'is-danger'
                } else if (number >= 6 && number < 8) {
                    return 'is-warning'
                } else if (number >= 8) {
                    return 'is-success'
                }
            }
        },
        filters: {
            /**
        * Filter to truncate string, accepts a length parameter
        */
            truncate(value, length) {
                return value.length > length
                    ? value.substr(0, length) + '...'
                    : value
            }
        },
        mounted() {
            this.loadAsyncData()
        }
    }
</script>

Draggable rows

Use draggable prop to allow rows to be draggable. Manage dragging using dragstart, dragover and drop events

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

<template>
  <div>
    <b-table
      :data="data"
      :columns="columns"
      draggable
      @dragstart="dragstart"
      @drop="drop"
      @dragover="dragover"
      @dragleave="dragleave">
    </b-table>
  </div>
</template>

<script>
  export default {
      data() {
          return {
              data: [
                  { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                  { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                  { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                  { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                  { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
              ],
              columns: [
                  {
                      field: 'id',
                      label: 'ID',
                      width: '40',
                      numeric: true
                  },
                  {
                      field: 'first_name',
                      label: 'First Name',
                  },
                  {
                      field: 'last_name',
                      label: 'Last Name',
                  },
                  {
                      field: 'date',
                      label: 'Date',
                      centered: true
                  },
                  {
                      field: 'gender',
                      label: 'Gender',
                  }
              ],
              draggingRow: null,
              draggingRowIndex: null
          }
      },
      methods: {
        dragstart (payload) {
          this.draggingRow = payload.row
          this.draggingRowIndex = payload.index
          payload.event.dataTransfer.effectAllowed = 'copy'
        },
        dragover(payload) {
          payload.event.dataTransfer.dropEffect = 'copy'
          payload.event.target.closest('tr').classList.add('is-selected')
          payload.event.preventDefault()
        },
        dragleave(payload) {
          payload.event.target.closest('tr').classList.remove('is-selected')
          payload.event.preventDefault()
        },
        drop(payload) {
          payload.event.target.closest('tr').classList.remove('is-selected')
          const droppedOnRowIndex = payload.index
          this.$buval.toast.open(`Moved ${this.draggingRow.first_name} from row ${this.draggingRowIndex + 1} to ${droppedOnRowIndex + 1}`)
        }
      }
  }
</script>

API

Name	Description	Type	Value	Default
`data`	Table data	Array<Object>	—	—
`columns`	Table columns, you can also add `renderHtml: true` on each column object	Array<Object> (same as TableColumns props)	—	—
`default-sort`	Sets the default sort column and order — e.g. `['first_name', 'desc']`	String, Array	—	order: `default-sort-direction` prop
`default-sort-direction`	Sets the default sort column direction on the first click	String	`asc`, `desc`	`asc`
`sort-icon`	Sets the header sorting icon	String	-	`arrow-up`
`sort-icon-size`	Sets the size of the sorting icon	String	`is-small`, , `is-medium`, `is-large`	`is-small`
`bordered`	Border to all cells	Boolean	—	`false`
`striped`	Whether table is striped	Boolean	—	`false`
`narrowed`	Makes the cells narrower	Boolean	—	`false`
`selected`	Set which row is selected, use the `.sync` modifier to make it two-way binding	Object	—	—
`focusable`	Table can be focused and user can navigate with keyboard arrows (require `selected.sync`) and rows are highlighted when hovering	Boolean	—	`false`
`hoverable`	Rows are highlighted when hovering	Boolean	—	`false`
`checkable`	Rows can be checked (multiple), checked rows will have a `.is-checked` class if you want to style	Boolean	—	`false`
`checkbox-position`	Position of the checkbox (if `checkable` is true)	String	`left` or `right`	`left`
`checked-rows`	Set which rows are checked, use the `.sync` modifier to make it two-way binding	Array<Object>	—	—
`header-checkable`	Show check/uncheck all checkbox in table header when `checkable`	Boolean	—	`true`
`mobile-cards`	Rows appears as cards on mobile (collapse rows)	Boolean	—	`true`
`backend-sorting`	Columns won't be sorted with Javascript, use with `sort` event to sort in your backend	Boolean	—	`false`
`backend-pagination`	Rows won't be paginated with Javascript, use with `page-change` event to paginate in your backend	Boolean	—	`false`
`total`	Total number of table data if `backend-pagination` is enabled	Number	—	`0`
`current-page`	Current page of table data (if `paginated`), use the `.sync` modifier to make it two-way binding	Number	—	`1`
`loading`	Loading state	Boolean	—	`false`
`paginated`	Adds pagination to the table	Boolean	—	`false`
`pagination-simple`	Simple pagination (if `paginated`)	Boolean	—	`false`
`pagination-size`	Pagination size (if `paginated`)	String	`is-small`, `is-medium`, `is-large`	—
`pagination-position`	Pagination position (if `paginated`)	String	`bottom`, `top`, `both`	`bottom`
`per-page`	How many rows per page (if `paginated`)	Number	—	`20`
`sort-multiple`	Adds multiple column sorting	Boolean	—	`false`
`sort-multiple-data`	Used in combination with `backend-sorting`	Object	`[{field, order}]`	`[]`
`sort-multiple-key`	Adds a key which will be required for multi column sorting to work. Will always be enabled if `null` is selected (default). Requres `sort-multiple`	String	`null`, `shiftKey`, `altKey`, `ctrlKey`	`null`
`row-class`	Add a class to row (`<tr>` element) based on the return	Function (row: Object, index: Number)	—	—
`detailed`	Allow row details (check scoped slots documentation)	Boolean	—	`false`
`custom-detail-row`	Allow a custom detail row	Boolean	—	`false`
`show-detail-icon`	Allow chevron icon and column to be visible	Boolean	—	`true`
`opened-detailed`	Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop)	Array	—	`[]`
`has-detailed-visible`	Controls the visibility of the trigger that toggles the detailed rows.	Function (row: Object)	—	`true`
`detail-key`	Use a unique key of your data Object when use detailed or opened detailed. (id recommended)	String	—	—
`custom-is-checked`	Custom method to verify if row is checked, works when is `checkable`. Useful for backend pagination	Function (a: Object, b: Object)	—	—
`is-row-checkable`	Custom method to verify if a row is disabled, works when is `checkable`.	Function (row: Object)	—	true
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	`fa`
`mobile-sort-placeholder`	Text when nothing is selected	String	—	—
`custom-row-key`	Use a unique key of your `data` Object for each row. Useful if your `data` prop has dynamic indices. (id recommended)	String	-	-
`draggable`	Allows rows to be draggable	Boolean	—	`false`
`backend-filtering`	Columns won't be filtered with Javascript, use with `searchable` prop to the columns to filter in your backend	Boolean	—	`false`
`aria-next-label`	Accessibility label for the next page link (if `paginated`)	String	—	—
`aria-previous-label`	Accessibility label for the previous page link (if `paginated`)	String	—	—
`aria-page-label`	Accessibility label for the page link. If passed, this text will be prepended to the number of the page (if `paginated`)	String	—	—
`aria-current-label`	Accessibility label for the current page link. If passed, this text will be prepended to the current page (if `paginated`)	String	—	—

Name slot	Description	Props (if no)
default	Required, table body and header	`row: Object`, `index: Number`
`header`	Table custom header	`column: Vue Object`, `index: Number`
`subheading`	Table subheading	`column: Vue Object`, `index: Number`
`detail`	Row detail (collapsible)	`row: Object`, `index: Number`
`empty`	Replaces table body when `data` array prop is empty	—
`footer`	Table custom footer	—
`bottom-left`	Custom bottom-left (opposite side of bottom pagination)	—
`top-left`	Custom top-left (opposite side of top pagination)	—

Name	Description	Parameters
`click`	Triggers when a row is clicked	`row: Object`
`dblclick`	Triggers when a row is double clicked	`row: Object`
`sort`	Triggers when a sortable column is clicked	`field: String`, `order: String`
`sorting-priority-removed`	Triggers when a multiselect sortable column remove button has been clicked	`field: String`
`select`	Triggers when a row is selected	`row: Object`, `oldRow: Object`
`check`	Triggers when the checkbox in a row is clicked and/or when the header checkbox is clicked	`checkedList: Array`, `row: Object`
`check-all`	Triggers when the header checkbox is clicked	`checkedList: Array`
`page-change`	Triggers when pagination page is changed	`page: Number`
`details-open`	Triggers when details is opened	`row: Object`
`details-close`	Triggers when details is closed	`row: Object`
`contextmenu`	Triggers when right-click on a row	`row: Object`, `contextMenuNativeEvent: Event`
`dragstart`	Triggers when starting to drag a row	`row: Object` , `dragEvent: Event` , `index: Number`
`dragend`	Triggers when ending to drag a row	`row: Object` , `dragEvent: Event` , `index: Number`
`drop`	Triggers when dropping on a row	`row: Object` , `drop: Event` , `index: Number`
`dragover`	Triggers when dragging over a row	`row: Object` , `dragover: Event` , `index: Number`
`mouseenter`	Triggers when mouse enters a row	`row: Object`
`mouseleave`	Triggers when mouse leaves a row	`row: Object`
`filters-change`	Triggers when filter change	`filter: Object`

Name	Description	Parameters
`initSort`	Sort using `default-sort` prop parameters
`focus`	Focus table element if is `focusable`
`toggleDetails`	Toggle row detail if table is `detailed`	`row: Object`
`openDetailRow`	Open row detail if table is `detailed`	`row: Object`
`closeDetailRow`	Close row detail if table is `detailed`	`row: Object`
`resetMultiSorting`	Resets the multi column sorting

Column

Name	Description	Type	Value	Default
`label`	Column header text, also used to identify column if `custom-key` prop is missing	String	—	—
`custom-key`	Unique identifier, use when `label` is missing or there are duplicate `label` names	String, Number	—	`this.label`
`field`	Property of the object the column is attributed, used for sorting	String	—	—
`meta`	Meta prop to add anything, useful when creating custom headers	Any	—	—
`width`	Column fixed width in pixels	Number	—	—
`numeric`	Align the cell content to the right, sort icon on left	Boolean	—	`false`
`centered`	Align the cell content to the center	Boolean	—	`false`
`sortable`	Whether the column can be sorted	Boolean	—	`false`
`visible`	Whether the column is visible	Boolean	—	`true`
`custom-sort`	Custom sort method, works when is `sortable`	Function (a: Object, b: Object, isAsc: Boolean)	—	—
`searchable`	Add a input below the header to filter data	Boolean	—	`false`
`subheading`	Column subheading text	String, Number	—	—

Name slot	Description	Props (if no)
default	Required, table column body	-
`header`	Table column custom header	`column: Vue Object`, `index: Number`
`subheading`	Table column custom subheading	`column: Vue Object`, `index: Number`

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$table-color`	color	`$text-strong`
`$table-background-color`	color	`$scheme-main`
`$table-cell-border`	string	`1px solid $border`
`$table-cell-border-width`	string	`0 0 1px`
`$table-cell-padding`	size	`0.5em 0.75em`
`$table-cell-heading-color`	color	`$text-strong`
`$table-head-cell-border-width`	size	`0 0 2px`
`$table-head-cell-color`	color	`$text-strong`
`$table-foot-cell-border-width`	size	`2px 0 0`
`$table-foot-cell-color`	color	`$text-strong`
`$table-head-background-color`	string	`transparent`
`$table-body-background-color`	string	`transparent`
`$table-foot-background-color`	string	`transparent`
`$table-row-hover-background-color`	color	`$scheme-main-bis`
`$table-row-active-background-color`	color	`$primary`
`$table-row-active-color`	color	`$primary-invert`
`$table-striped-row-even-background-color`	color	`$scheme-main-bis`
`$table-striped-row-even-hover-background-color`	color	`$scheme-main-ter`
`$table-sticky-header-height`	string	`300px`