el-table-prepend-next

A Vue 3 component that adds a prepend slot to Element Plus's el-table

Introduction

el-table-prepend-next extends the popular Element Plus table component by adding a prepend slot. This allows you to insert custom content (toolbars, filters, buttons, etc.) between the table header and body.

Requirements

• Vue 3.5+
• Element Plus 2.14+
• @element-plus/icons-vue 2.3+ (optional, but often used)

Installation

npm install el-table-prepend-next
# or
yarn add el-table-prepend-next
# or
pnpm add el-table-prepend-next

Usage

<script lang="ts" setup>
import { ElTable, ElTableColumn } from 'el-table-prepend-next'

interface User {
  date: string
  name: string
  address: string
}

const formatter = (row: User) => {
  return row.address
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<template>
  <el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <template #prepend>
      <el-button>Submit</el-button>
    </template>
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />
  </el-table>
</template>

<style scoped>
  :deep(.el-table__prepend-wrapper) {
    padding: 10px;
    background-color: rgb(244, 244, 245);

    .el-button {
      width: 100%;
    }
  }
</style>