Table

A simple component based table, with search and sort slots.

Summer Vibes

20.4MB

|

1080P | H264

457 view(s)

|

3m 22s

2023-07-14, 02:15 PM

Midnight Thoughts

20.4MB

|

1080P | H264

1654 view(s)

|

5m 41s

2022-11-03, 11:52 PM

Morning Routine

20.4MB

|

1080P | H264

87 view(s)

|

1m 58s

2024-01-20, 07:30 AM

Urban Jungle

20.4MB

|

1080P | H264

3 view(s)

|

4m 15s

2021-05-09, 09:45 PM

Showing 1 to 4 of 10

Installation

npx cedar-ui@latest add table
npm i @aminnausin/cedar-ui

or download the following folders to your project:

@/components/cedar-ui/table

Usage

vue
<script setup lang="ts">
import { TableBase } from '@/components/cedar-ui/hover-card'
import { ref } from 'vue';

const searchQuery = ref('')

</script>

<template>
    <TableBase
        :data="rows"
        :row="RowComponent"
        :clickAction="
            () => {
                toast.info('Primary Action');
            }
        "
        :otherAction="
            () => {
                toast.info('Other Action');
            }
        "
        :loading="isLoadingRows"
        :useToolbar="true"
        :sortAction="handleSort"
        :sortingOptions="sortingOptions"
        :selectedID="-1"
        :startAscending="true"
        :search-query="searchQuery"
        :items-per-page="12"
        v-model="searchQuery"
    />
</template>
Edit this page on GitHub