vue-slottable 1.0.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -0,0 +1,209 @@
+# vue-slottable
+
+[![CI](https://github.com/nickvdyck/vue-slot-table/actions/workflows/ci.yml/badge.svg)](https://github.com/nickvdyck/vue-slot-table/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/vue-slottable.svg)](https://www.npmjs.com/package/vue-slottable)
+[![license](https://img.shields.io/npm/l/vue-slottable.svg)](./LICENSE.txt)
+
+A flexible, slot-based Vue 3 table component with sticky columns, column groups, and scoped slots for custom cell rendering.
+
+## Features
+
+- **Slot-based columns** — define headers and cells with named slots
+- **Sticky columns** — pin columns to the left or right edge
+- **Column groups** — add grouped header rows with colspan
+- **Row click events** — handle row interactions
+- **Zero CSS opinions** — bring your own styles
+- **Lightweight** — no dependencies beyond Vue 3
+- **TypeScript declarations** included
+
+## Installation
+
+```bash
+npm install vue-slottable
+```
+
+Requires Vue 3.4+.
+
+## Quick Start
+
+```vue
+<script setup>
+import { SlotTable, SlotTableColumn } from 'vue-slottable'
+
+const rows = [
+  { name: 'Alice', age: 28 },
+  { name: 'Bob', age: 34 },
+]
+</script>
+
+<template>
+  <SlotTable :rows="rows" table-class="my-table">
+    <SlotTableColumn>
+      <template #header>Name</template>
+      <template #cell="{ row }">{{ row.name }}</template>
+    </SlotTableColumn>
+
+    <SlotTableColumn>
+      <template #header>Age</template>
+      <template #cell="{ row }">{{ row.age }}</template>
+    </SlotTableColumn>
+  </SlotTable>
+</template>
+```
+
+## API Reference
+
+### `<SlotTable>`
+
+The main table component. Renders a `<table>` element.
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `rows` | `Array` | Yes | — | Array of row data objects |
+| `table-class` | `String` | No | `''` | CSS class applied to the `<table>` element |
+
+#### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `row-click` | `rowIndex: number` | Emitted when a table row is clicked |
+
+#### Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Accepts `<SlotTableColumn>` and `<SlotTableColumnGroup>` children |
+
+---
+
+### `<SlotTableColumn>`
+
+Defines a single table column. This is a renderless component — it must be a direct child of `<SlotTable>`.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `sticky` | `String` | `''` | Set to `'left'` or `'right'` to make the column sticky |
+
+#### Slots
+
+| Slot | Scope | Description |
+|------|-------|-------------|
+| `header` | — | Content for the column's `<th>` |
+| `cell` | `{ row, rowIndex, columnIndex }` | Content for each `<td>` in this column |
+
+---
+
+### `<SlotTableColumnGroup>`
+
+Defines a grouped header row entry. Must be a direct child of `<SlotTable>`.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `sticky` | `String` | `''` | Set to `'left'` or `'right'` for sticky positioning |
+| `colspan` | `Number` | — | Number of columns this group header spans |
+
+#### Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Content for the group `<th>` |
+
+## Examples
+
+### Sticky Columns
+
+```vue
+<SlotTable :rows="rows">
+  <SlotTableColumn sticky="left">
+    <template #header>ID</template>
+    <template #cell="{ row }">{{ row.id }}</template>
+  </SlotTableColumn>
+
+  <SlotTableColumn>
+    <template #header>Description</template>
+    <template #cell="{ row }">{{ row.description }}</template>
+  </SlotTableColumn>
+
+  <SlotTableColumn sticky="right">
+    <template #header>Actions</template>
+    <template #cell="{ row }">
+      <button @click.stop="edit(row)">Edit</button>
+    </template>
+  </SlotTableColumn>
+</SlotTable>
+```
+
+### Column Groups
+
+```vue
+<SlotTable :rows="rows">
+  <SlotTableColumnGroup :colspan="2">Personal</SlotTableColumnGroup>
+  <SlotTableColumnGroup :colspan="1">Work</SlotTableColumnGroup>
+
+  <SlotTableColumn>
+    <template #header>Name</template>
+    <template #cell="{ row }">{{ row.name }}</template>
+  </SlotTableColumn>
+
+  <SlotTableColumn>
+    <template #header>Age</template>
+    <template #cell="{ row }">{{ row.age }}</template>
+  </SlotTableColumn>
+
+  <SlotTableColumn>
+    <template #header>Role</template>
+    <template #cell="{ row }">{{ row.role }}</template>
+  </SlotTableColumn>
+</SlotTable>
+```
+
+### Row Click Events
+
+```vue
+<script setup>
+function onRowClick(rowIndex) {
+  console.log('Clicked row:', rowIndex)
+}
+</script>
+
+<template>
+  <SlotTable :rows="rows" @row-click="onRowClick">
+    <!-- columns... -->
+  </SlotTable>
+</template>
+```
+
+### Custom Cell Rendering
+
+```vue
+<SlotTableColumn>
+  <template #header>Status</template>
+  <template #cell="{ row }">
+    <span :class="'badge-' + row.status">{{ row.status }}</span>
+  </template>
+</SlotTableColumn>
+```
+
+## Development
+
+```bash
+npm install
+npm run dev       # Start dev server with demo app
+npm test          # Run tests
+npm run lint      # Lint
+npm run build:lib # Build library bundles
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## License
+
+[MIT](./LICENSE.txt)

package/dist/style.css

@@ -0,0 +1 @@
+.sticky-left{position:sticky;left:0}.sticky-right{position:sticky;right:0}

package/dist/vue-slottable.mjs

@@ -0,0 +1,81 @@
+import { defineComponent as i, h as s } from "vue";
+const w = i({
+  name: "SlotTableColumn",
+  props: {
+    sticky: {
+      type: String,
+      default: ""
+    }
+  },
+  setup() {
+    return () => null;
+  }
+}), P = i({
+  name: "SlotTableColumnGroup",
+  props: {
+    sticky: {
+      type: String,
+      default: ""
+    },
+    colspan: {
+      type: Number,
+      default: void 0
+    }
+  },
+  setup() {
+    return () => null;
+  }
+}), N = i({
+  name: "SlotTable",
+  props: {
+    rows: {
+      type: Array,
+      required: !0
+    },
+    tableClass: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["row-click"],
+  setup(p, { slots: f, emit: m }) {
+    return () => {
+      const k = f.default ? f.default() : [], a = [], d = [];
+      k.forEach((t) => {
+        t.type === w ? a.push(t) : t.type === P && d.push(t);
+      });
+      const b = a.map((t) => {
+        const l = (t.props || {}).sticky || "", n = {
+          "sticky-left": l === "left",
+          "sticky-right": l === "right"
+        }, o = t.children && t.children.header, c = typeof o == "function" ? o() : null;
+        return s("th", { class: n }, c);
+      }), h = d.map((t) => {
+        const e = t.props || {}, l = e.sticky || "", n = e.colspan ? Number(e.colspan) : void 0, o = {
+          "sticky-left": l === "left",
+          "sticky-right": l === "right"
+        }, c = t.children && t.children.default, r = typeof c == "function" ? c() : null;
+        return s("th", { class: o, colspan: n }, r);
+      }), u = [];
+      h.length > 0 && u.push(s("tr", null, h)), u.push(s("tr", null, b));
+      const C = s("thead", null, u), S = p.rows.map((t, e) => {
+        const l = a.map((n, o) => {
+          const r = (n.props || {}).sticky || "", T = {
+            "sticky-left": r === "left",
+            "sticky-right": r === "right"
+          }, y = n.children && n.children.cell, _ = typeof y == "function" ? y({ row: t, rowIndex: e, columnIndex: o }) : null;
+          return s("td", { class: T }, _);
+        });
+        return s("tr", {
+          onClick: () => m("row-click", e)
+        }, l);
+      }), g = s("tbody", null, S);
+      return s("table", { class: p.tableClass }, [C, g]);
+    };
+  }
+});
+export {
+  N as SlotTable,
+  w as SlotTableColumn,
+  P as SlotTableColumnGroup
+};

package/dist/vue-slottable.umd.js

@@ -0,0 +1 @@
+(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n.VueSlotTable={},n.Vue))})(this,function(n,t){"use strict";const p=t.defineComponent({name:"SlotTableColumn",props:{sticky:{type:String,default:""}},setup(){return()=>null}}),f=t.defineComponent({name:"SlotTableColumnGroup",props:{sticky:{type:String,default:""},colspan:{type:Number,default:void 0}},setup(){return()=>null}}),k=t.defineComponent({name:"SlotTable",props:{rows:{type:Array,required:!0},tableClass:{type:String,default:""}},emits:["row-click"],setup(d,{slots:h,emit:S}){return()=>{const C=h.default?h.default():[],u=[],y=[];C.forEach(e=>{e.type===p?u.push(e):e.type===f&&y.push(e)});const g=u.map(e=>{const l=(e.props||{}).sticky||"",o={"sticky-left":l==="left","sticky-right":l==="right"},c=e.children&&e.children.header,r=typeof c=="function"?c():null;return t.h("th",{class:o},r)}),m=y.map(e=>{const s=e.props||{},l=s.sticky||"",o=s.colspan?Number(s.colspan):void 0,c={"sticky-left":l==="left","sticky-right":l==="right"},r=e.children&&e.children.default,i=typeof r=="function"?r():null;return t.h("th",{class:c,colspan:o},i)}),a=[];m.length>0&&a.push(t.h("tr",null,m)),a.push(t.h("tr",null,g));const T=t.h("thead",null,a),P=d.rows.map((e,s)=>{const l=u.map((o,c)=>{const i=(o.props||{}).sticky||"",w={"sticky-left":i==="left","sticky-right":i==="right"},b=o.children&&o.children.cell,G=typeof b=="function"?b({row:e,rowIndex:s,columnIndex:c}):null;return t.h("td",{class:w},G)});return t.h("tr",{onClick:()=>S("row-click",s)},l)}),_=t.h("tbody",null,P);return t.h("table",{class:d.tableClass},[T,_])}}});n.SlotTable=k,n.SlotTableColumn=p,n.SlotTableColumnGroup=f,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "vue-slottable",
+  "version": "1.0.0",
+  "description": "A flexible, slot-based Vue 3 table component with sticky columns, column groups, and scoped slots for custom cell rendering.",
+  "main": "./dist/vue-slottable.umd.js",
+  "module": "./dist/vue-slottable.mjs",
+  "types": "./src/types.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-slottable.mjs",
+      "require": "./dist/vue-slottable.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --mode lib",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/ tests/",
+    "lint:fix": "eslint src/ tests/ --fix"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.0",
+    "@vue/test-utils": "^2.4.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "jsdom": "^24.1.0",
+    "vite": "^5.4.0",
+    "vitest": "^2.0.0",
+    "vue": "^3.4.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "table",
+    "slot-table",
+    "slots",
+    "scoped-slots",
+    "sticky-columns",
+    "column-groups",
+    "data-table",
+    "component"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nickvdyck/vue-slot-table.git"
+  },
+  "homepage": "https://github.com/nickvdyck/vue-slot-table#readme",
+  "bugs": {
+    "url": "https://github.com/nickvdyck/vue-slot-table/issues"
+  }
+}

package/src/App.vue

@@ -0,0 +1,200 @@
+<script setup>
+import { ref } from 'vue'
+import { SlotTable, SlotTableColumn, SlotTableColumnGroup } from './index.js'
+
+const rows = ref([
+  { id: 1, name: 'Alice Johnson', age: 28, role: 'Engineer', department: 'Frontend', salary: 95000 },
+  { id: 2, name: 'Bob Smith', age: 34, role: 'Designer', department: 'UX', salary: 88000 },
+  { id: 3, name: 'Carol Williams', age: 41, role: 'Manager', department: 'Engineering', salary: 120000 },
+  { id: 4, name: 'David Brown', age: 25, role: 'Intern', department: 'Backend', salary: 45000 },
+  { id: 5, name: 'Eva Martinez', age: 31, role: 'Engineer', department: 'Backend', salary: 102000 },
+])
+
+const lastClickedRow = ref(null)
+
+function onRowClick(rowIndex) {
+  lastClickedRow.value = rowIndex
+}
+
+function formatSalary(value) {
+  return `$${value.toLocaleString()}`
+}
+</script>
+
+<template>
+  <div class="demo">
+    <h1>Vue SlotTable Demo</h1>
+    <p class="subtitle">A flexible, slot-based table component for Vue 3</p>
+
+    <div class="card">
+      <h2>Employee Directory</h2>
+      <p v-if="lastClickedRow !== null" class="click-info">
+        Last clicked row: {{ lastClickedRow }} ({{ rows[lastClickedRow].name }})
+      </p>
+
+      <div class="table-wrapper">
+        <SlotTable :rows="rows" table-class="demo-table" @row-click="onRowClick">
+          <SlotTableColumnGroup sticky="left" :colspan="2">
+            Identity
+          </SlotTableColumnGroup>
+          <SlotTableColumnGroup :colspan="2">
+            Position
+          </SlotTableColumnGroup>
+          <SlotTableColumnGroup sticky="right" :colspan="1">
+            Compensation
+          </SlotTableColumnGroup>
+
+          <SlotTableColumn sticky="left">
+            <template #header>Name</template>
+            <template #cell="{ row }">
+              <strong>{{ row.name }}</strong>
+            </template>
+          </SlotTableColumn>
+
+          <SlotTableColumn sticky="left">
+            <template #header>Age</template>
+            <template #cell="{ row }">{{ row.age }}</template>
+          </SlotTableColumn>
+
+          <SlotTableColumn>
+            <template #header>Role</template>
+            <template #cell="{ row }">
+              <span class="badge" :class="'badge--' + row.role.toLowerCase()">
+                {{ row.role }}
+              </span>
+            </template>
+          </SlotTableColumn>
+
+          <SlotTableColumn>
+            <template #header>Department</template>
+            <template #cell="{ row }">{{ row.department }}</template>
+          </SlotTableColumn>
+
+          <SlotTableColumn sticky="right">
+            <template #header>Salary</template>
+            <template #cell="{ row }">
+              <span class="salary">{{ formatSalary(row.salary) }}</span>
+            </template>
+          </SlotTableColumn>
+        </SlotTable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #f5f5f5;
+  color: #333;
+}
+
+.demo {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 0.25rem;
+}
+
+.subtitle {
+  color: #666;
+  margin-bottom: 2rem;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.card h2 {
+  margin-bottom: 0.75rem;
+}
+
+.click-info {
+  color: #0066cc;
+  font-size: 0.875rem;
+  margin-bottom: 0.75rem;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.demo-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.demo-table th,
+.demo-table td {
+  padding: 0.625rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+  background: white;
+}
+
+.demo-table thead th {
+  font-weight: 600;
+  color: #555;
+  border-bottom: 2px solid #ccc;
+}
+
+.demo-table tbody tr {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.demo-table tbody tr:hover {
+  background: #f0f7ff;
+}
+
+.demo-table tbody tr:hover td {
+  background: #f0f7ff;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.badge--engineer {
+  background: #e3f2fd;
+  color: #1565c0;
+}
+
+.badge--designer {
+  background: #fce4ec;
+  color: #c62828;
+}
+
+.badge--manager {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.badge--intern {
+  background: #fff3e0;
+  color: #e65100;
+}
+
+.salary {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+</style>

package/src/components/SlotTable.vue

@@ -0,0 +1,114 @@
+<script>
+import { defineComponent, h } from 'vue'
+import SlotTableColumn from './SlotTableColumn.vue'
+import SlotTableColumnGroup from './SlotTableColumnGroup.vue'
+
+export default defineComponent({
+  name: 'SlotTable',
+  props: {
+    rows: {
+      type: Array,
+      required: true,
+    },
+    tableClass: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['row-click'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const children = slots.default ? slots.default() : []
+
+      const columns = []
+      const columnGroups = []
+
+      children.forEach((vnode) => {
+        if (vnode.type === SlotTableColumn) {
+          columns.push(vnode)
+        } else if (vnode.type === SlotTableColumnGroup) {
+          columnGroups.push(vnode)
+        }
+      })
+
+      // Build header cells
+      const headerCells = columns.map((col) => {
+        const colProps = col.props || {}
+        const sticky = colProps.sticky || ''
+        const classes = {
+          'sticky-left': sticky === 'left',
+          'sticky-right': sticky === 'right',
+        }
+
+        const headerSlot = col.children && col.children.header
+        const headerContent = typeof headerSlot === 'function' ? headerSlot() : null
+
+        return h('th', { class: classes }, headerContent)
+      })
+
+      // Build group header row
+      const groupHeaderCells = columnGroups.map((group) => {
+        const groupProps = group.props || {}
+        const sticky = groupProps.sticky || ''
+        const colspan = groupProps.colspan ? Number(groupProps.colspan) : undefined
+        const classes = {
+          'sticky-left': sticky === 'left',
+          'sticky-right': sticky === 'right',
+        }
+
+        const defaultSlot = group.children && group.children.default
+        const content = typeof defaultSlot === 'function' ? defaultSlot() : null
+
+        return h('th', { class: classes, colspan }, content)
+      })
+
+      // Build thead
+      const headerRows = []
+      if (groupHeaderCells.length > 0) {
+        headerRows.push(h('tr', null, groupHeaderCells))
+      }
+      headerRows.push(h('tr', null, headerCells))
+      const thead = h('thead', null, headerRows)
+
+      // Build tbody
+      const bodyRows = props.rows.map((row, rowIndex) => {
+        const cells = columns.map((col, columnIndex) => {
+          const colProps = col.props || {}
+          const sticky = colProps.sticky || ''
+          const classes = {
+            'sticky-left': sticky === 'left',
+            'sticky-right': sticky === 'right',
+          }
+
+          const cellSlot = col.children && col.children.cell
+          const cellContent = typeof cellSlot === 'function'
+            ? cellSlot({ row, rowIndex, columnIndex })
+            : null
+
+          return h('td', { class: classes }, cellContent)
+        })
+
+        return h('tr', {
+          onClick: () => emit('row-click', rowIndex),
+        }, cells)
+      })
+
+      const tbody = h('tbody', null, bodyRows)
+
+      return h('table', { class: props.tableClass }, [thead, tbody])
+    }
+  },
+})
+</script>
+
+<style>
+.sticky-left {
+  position: sticky;
+  left: 0;
+}
+
+.sticky-right {
+  position: sticky;
+  right: 0;
+}
+</style>

package/src/components/SlotTableColumn.vue

@@ -0,0 +1,16 @@
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SlotTableColumn',
+  props: {
+    sticky: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    return () => null
+  },
+})
+</script>

package/src/components/SlotTableColumnGroup.vue

@@ -0,0 +1,20 @@
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SlotTableColumnGroup',
+  props: {
+    sticky: {
+      type: String,
+      default: '',
+    },
+    colspan: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  setup() {
+    return () => null
+  },
+})
+</script>

package/src/index.js

@@ -0,0 +1,3 @@
+export { default as SlotTable } from './components/SlotTable.vue'
+export { default as SlotTableColumn } from './components/SlotTableColumn.vue'
+export { default as SlotTableColumnGroup } from './components/SlotTableColumnGroup.vue'

package/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/types.d.ts

@@ -0,0 +1,25 @@
+import { DefineComponent } from 'vue'
+
+export interface CellSlotScope<T = any> {
+  row: T
+  rowIndex: number
+  columnIndex: number
+}
+
+export interface SlotTableProps {
+  rows: any[]
+  tableClass?: string
+}
+
+export interface SlotTableColumnProps {
+  sticky?: '' | 'left' | 'right'
+}
+
+export interface SlotTableColumnGroupProps {
+  sticky?: '' | 'left' | 'right'
+  colspan?: number
+}
+
+export declare const SlotTable: DefineComponent<SlotTableProps>
+export declare const SlotTableColumn: DefineComponent<SlotTableColumnProps>
+export declare const SlotTableColumnGroup: DefineComponent<SlotTableColumnGroupProps>