Add config prop to table for easy configuration

[permafrost06]

We may end up with a lot of props on the TableComponent. I want a single prop to be exposed so that the component can be configured easily without ugly markup.

Instead of

<script setup>
const tableCols = ref([
    {
        name: "no",
        label: "No",
    },
    {
        name: "name",
        label: "Name",
    },
    {
        name: "email",
        label: "Email",
    },
]);

const tableData = ref([
    { no: 1, name: "Some user", email: "someuser@gmail.com" },
    { no: 2, name: "Some user", email: "someuser@gmail.com" },
    { no: 3, name: "Some user", email: "someuser@gmail.com" },
    { no: 4, name: "Some user", email: "someuser@gmail.com" },
    { no: 5, name: "Some user", email: "someuser@gmail.com" },
]);
</script>

<template>
    <TableComponent :cols="tableCols" :data="tableData" />
</template>

We should be able to do

<script setup>
const tableConfig = ref({
    tableCols: [
        {
            name: "no",
            label: "No",
        },
        {
            name: "name",
            label: "Name",
        },
        {
            name: "email",
            label: "Email",
        },
    ],

    tableData: [
        { no: 1, name: "Some user", email: "someuser@gmail.com" },
        { no: 2, name: "Some user", email: "someuser@gmail.com" },
        { no: 3, name: "Some user", email: "someuser@gmail.com" },
        { no: 4, name: "Some user", email: "someuser@gmail.com" },
        { no: 5, name: "Some user", email: "someuser@gmail.com" },
    ],
});
</script>

<template>
    <TableComponent :config="tableConfig" />
</template>

If you have any suggestions, put them in the comments.

[protibimbok]

I think 4 to 5 props are normal for a component. Currently we have only 3. If you are concerned about being too many props, we may list the possible configurations and then take actions based on that. Because, jamming one prop with too many options is not a good practice either.

[permafrost06]

We have more props coming that's why I created this issue. You are right, though. We can afford to wait until this becomes a probelm. Then we can decide how to solve this.

FormKit does something similar with their schema. Although FormKit schema is much more expansive, have a look at it.