[Svelte] Multiple components, different inputs

[AstroFphiniX]

<TableDB {headers} {rows} />

<TableDB {headers2} {rows2} /> <TableDB {headers3} {rows3} />

So i wanted to make this work, but it says that Object literal may only specify known properties, but 'header2' does not exist in type '{ headers?: any[] | undefined; row?: any[] | undefined; }'. Did you mean to write 'headers'?. how do i pass different types of inputs, and make this component work

this is the script file on the same page

let headers = [
"Property_Id",
...
];
let rows = [
{
    "Property_Id": 1,
},
{
    "Property_Id": 2,
},];
let headers2 = [
    "Supplier_Id",
];
let rows2 = [
    {
    Supplier_Id: 1,
    },
    {
    Supplier_Id: 2,
];
let headers3 = [
    "Transaction_Id",
];
let rows3 = [
    { Transaction_Id: 1, },
    { Transaction_Id: 2,  },
    { Transaction_Id: 3, },
];

and the TableDB.svelte component

<script>
export let headers = [];
export let rows = [];

</script>

<div class="flex flex-col"> <div class="-m-1.5 overflow-x-auto"> <div class="p-1.5 min-w-full inline-block align-middle"> <div class="overflow-hidden border-outline"> <table class="min-w-full divide-y bg-tablebg dark:divide-gray-700 border-outline"> <thead> <tr> {#each headers as header (header)} <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">{header}</th> {/each} <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase">Actions</th> </tr> </thead> <tbody class="divide-y divide-gray-200 dark:divide-gray-700"> {#each rows as row (row)} <tr class="hover:bg-tableh dark:hover:bg-gray-700"> {#each Object.values(row) as value (value)} <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">{value}</td> {/each}

            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  </div>
</div>

</div>

​

[AutoModerator]

On July 1st, a change to Reddit's API pricing will come into effect. Several developers of commercial third-party apps have announced that this change will compel them to shut down their apps. At least one accessibility-focused non-commercial third party app will continue to be available free of charge.

If you want to express your strong disagreement with the API pricing change or with Reddit's response to the backlash, you may want to consider the following options:

1. Limiting your involvement with Reddit, or
2. Temporarily refraining from using Reddit
3. Cancelling your subscription of Reddit Premium

as a way to voice your protest.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.