<script setup lang="ts">
import type { TableColumn } from "@oruga-ui/oruga-next";
import { ref } from "vue";

const data = [
    {
        first_name: "Jacobs",
        last_name: "Simmons",
    },
    {
        first_name: "John",
        last_name: "Jacobs",
    },
    {
        first_name: "Tina",
        last_name: "Gilbert",
    },
    {
        first_name: "Clarence",
        last_name: "Flores",
    },
    {
        first_name: "Anne",
        last_name: "Lee",
    },
];

const columns: TableColumn<(typeof data)[number]>[] = [
    {
        field: "first_name",
        label: "First Name",
        filterable: true,
    },
    {
        field: "last_name",
        label: "Last Name",
        filterable: true,
    }
];

const table = ref();

function updateSearch(value) {
    table.value.columns.map((column) => {
        table.value.filters[column.field] = value;
    });
}
</script>

<template>
    <section>
        <o-input @update:model-value="updateSearch" />
        <o-table ref="table" :data="data" :columns="columns" />
    </section>
</template>

<script setup lang="ts">
import type { TableColumn } from "@oruga-ui/oruga-next";
import { onMounted, ref } from "vue";

const data = [
    {
        first_name: "Jacobs",
        last_name: "Simmons",
    },
    {
        first_name: "John",
        last_name: "Jacobs",
    },
    {
        first_name: "Tina",
        last_name: "Gilbert",
    },
    {
        first_name: "Clarence",
        last_name: "Flores",
    },
    {
        first_name: "Anne",
        last_name: "Lee",
    },
];

const columns: TableColumn<(typeof data)[number]>[] = [
    {
        field: "first_name",
        label: "First Name",
        filterable: true,
    },
    {
        field: "last_name",
        label: "Last Name",
        filterable: true,
    }
];

const table = ref();

onMounted(() => {
    table.value.filters['first_name'] = 'Anne'
})

</script>

<template>
    <section>
        <o-table ref="table" :data="data" :columns="columns" />
    </section>
</template>