Nuxt3 Typescript Simple Datatable that handles dynamic row content with generic typing
- Table
- Generic typing
- Dynamic row content
- Add
@creatiwity/datatable
dependency to your project
# Using pnpm
pnpm add @creatiwity/datatable
# Using yarn
yarn add @creatiwity/datatable
# Using npm
npm install @creatiwity/datatable
- Add
@creatiwity/datatable
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: ["@creatiwity/datatable"],
});
That's it! You can now use Creat Datatable in your Nuxt app ✨
const dataTableInfos = {
headers: [
{
id: "name",
label: "Nom",
},
],
data: [{ name: "Toto" }, { name: "Tata" }],
};
<CreatDatable id="creat-datatable" :infos="dataTableInfos">
<template #name="category">
<strong>{{ category.data.name }}</strong>
</template>
</CreatDatable>