Table

The ETable efficiently displays details, compares items, shows timetables, and lists contacts, enhancing usability by organizing information logically. Demo Here

Usage

<template>
  <ETable
      :headers="headers"
      :items="data"
  />
</template>

<script setup>

  const headers = [
    {title: 'Name', value: 'name'},
    {title: 'Status', value: 'status'},
    {title: 'Date', value: 'date'}
  ]

  const data = [
    {
      name: "Row 1",
      status: "Active",
      date: "15/11/2022",
    },
    {
      name: "Row 2",
      status: "Pending",
      date: "15/11/2022",
    },
    {
      name: "Row 3",
      status: "Error",
      date: "15/11/2022",
    }
  ];
</script>

Header

The main part of the table is the headers array. It details which qualities to show, their labels, arrangement, and appearance. To display anything other than an empty column, the following characteristics must be present: title, value, sortable, sort. All other attributes are optional. The value attribute identifies the column in slots, events, filters, and sort functions.

const headers = [
    {title: 'Full Name', value: 'name', sortable: true, sort: 'indeterminate '},
    {title: 'Age', value: 'age'},
    {title: 'City', value: 'city'}
]

Note

sortable enables sorting option and sort represents sort order. @values: 'indeterminate', ' asc', 'desc' (Uses an up or down arrow to represent sorting).

Items

Items on a table can be objects with any type or number of attributes. Row selection requires only a unique identity of some type.

const items = [
    {
        name: "Kate gray",
        age: "24",
        city: "New York",
    }
]

Props

For Table component, the following props are available:

Prop	Type	Default	Note
hideHeader	Boolean	false	Hides <thead>.
items	Array	-	Creates table body.
headers	Array	-	Creates a Header row.
striped	Boolean	false	Create a zebra striped table.
height	String	-	Sets the component's height.
bordered	Boolean	false	Adds vertical border to the cell.
rowClasses	String	-	Adds a custom class for each row.
stickyHead	Boolean	false	Makes the header of a table stick to the top of the screen.
size	String	"md"	The ETable element has three predefined sizes: sm, md, lg.
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container. Possible values are start, center and end.
square	Boolean	false	Removes rounded corners of the element.

Emits

The ETable component contains following emits.

Emit	Description
selectRow	Emitted when clicked on tr (table row)
selectTD	Emitted when clicked on td (table cell)
sorted	Emitted when sort changes

Slots

The ETable component provide following slots that enable you to customize the content.

Slot	Description
header.value	Render custom markup in specific column.
body.value	Render custom markup in specific column.