Tables

We provide a small table wrapper so you can easily display table data.

IdNameSalaryCountryCity
1 Dakota Rice $36.738 Niger Oud-Turnhout
2 Minerva Hooper $23,789 Curaçao Sinaai-Waas
3 Sage Rodriguez $56,142 Netherlands Baileux
4 Philip Chaney $38,735 Korea, South Overland Park
5 Doris Greene $63,542 Malawi Feldkirchen in Kärnten
<template>
  <paper-table :data="tableData" :columns="tableColumns" type="hover">
  </paper-table>
</template>

<script>
  export default {
    data(){
      return {
       tableColumns: ["Id", "Name", "Salary", "Country", "City"],
       tableData: [
            {
              id: 1,
              name: "Dakota Rice",
              salary: "$36.738",
              country: "Niger",
              city: "Oud-Turnhout"
            },
            {
              id: 2,
              name: "Minerva Hooper",
              salary: "$23,789",
              country: "Curaçao",
              city: "Sinaai-Waas"
            },
            {
              id: 3,
              name: "Sage Rodriguez",
              salary: "$56,142",
              country: "Netherlands",
              city: "Baileux"
            },
            {
              id: 4,
              name: "Philip Chaney",
              salary: "$38,735",
              country: "Korea, South",
              city: "Overland Park"
            },
            {
              id: 5,
              name: "Doris Greene",
              salary: "$63,542",
              country: "Malawi",
              city: "Feldkirchen in Kärnten"
            }
          ]

      }
    }
  }
</script>

TIP

You can use paper table row and column slots to display more complex information

IdName SalaryOperations
1Dakota Rice$36.738
2Minerva Hooper$23,789
3Sage Rodriguez$56,142
4Philip Chaney$38,735
5Doris Greene$63,542
<template>
  <paper-table :data="tableData" :columns="tableColumns" type="hover">
   <template slot="columns">
          <th>Id</th>
          <th>Name</th>
          <th><i class="fa fa-money"></i> Salary</th>
          <th>Operations</th>
      </template>
      <template slot-scope="{row}">
        <td>{{row.id}}</td>
        <td><b>{{row.name}}</b></td>
        <td>{{row.salary}}</td>
        <td>
          <p-button type="info" icon @click.native="handleEdit(row)">
            <i class="ti ti-pencil-alt"></i>
          </p-button>
          <p-button style="margin-left: 5px;" type="danger" icon @click.native="handleDelete(row)">
           <i class="ti ti-close"></i>
          </p-button>
        </td>
      </template>
  </paper-table>
</template>

<script>
  export default {
    data(){
      return {
       tableColumns: ["Id", "Name", "Salary", "Country", "City"],
       tableData: [
            {
              id: 1,
              name: "Dakota Rice",
              salary: "$36.738",
              country: "Niger",
              city: "Oud-Turnhout"
            },
            {
              id: 2,
              name: "Minerva Hooper",
              salary: "$23,789",
              country: "Curaçao",
              city: "Sinaai-Waas"
            },
            {
              id: 3,
              name: "Sage Rodriguez",
              salary: "$56,142",
              country: "Netherlands",
              city: "Baileux"
            },
            {
              id: 4,
              name: "Philip Chaney",
              salary: "$38,735",
              country: "Korea, South",
              city: "Overland Park"
            },
            {
              id: 5,
              name: "Doris Greene",
              salary: "$63,542",
              country: "Malawi",
              city: "Feldkirchen in Kärnten"
            }
          ]

      }
    },
    methods: {
      handleEdit(row){
        console.log(`You want to edit row with id: ${row.id}`)
      },
      handleDelete(row){
        console.log(`You want to delete row with id: ${row.id}`)
      }
    }
  }
</script>

Table Attributes

AttributeDescriptionTypeAccepted valuesDefault
columnsArray of column valuesArrayLower case and uppper case key values
dataArray of data objectsArrayAny data object
typeTable typestringstripedhover
titleTable titlestring--
subTitleTable sub titlestring--

Table Slots

NameDescription
defaultContent for table data. Can be used as a scoped slot and sends {row} as slot data
columnsContent for columns