Add Inertia to the Table

README.md

@@ -24,8 +24,13 @@ The DataTable library provides a powerful and flexible way to create interactive
 
 ## Installation
 
+> **Requirements:**
+> - PHP 8.1+
+> - Laravel 12.0+
+> - Inertia.js 2.0+
+
 ```bash
-composer require arkhas/inertia-datatable
+composer require arkhas/inertia-vue-datatable
 ```
 
 Publish the assets:
@@ -48,7 +53,7 @@ Make sure to include the Tailwind CSS configuration in your project:
 module.exports = {
   content: [
     // ...
-    './vendor/arkhas/inertia-datatable/resources/js/**/*.vue',
+    './vendor/arkhas/inertia-vue-datatable/resources/js/**/*.vue',
   ],
   // ...
 }
@@ -153,7 +158,7 @@ class UserController extends Controller
 
 ```vue
 <script setup>
-import { DataTable } from '@vendor/inertia-datatable';
+import { DataTable } from 'arkhas/inertia-vue-datatable';
 </script>
 
 <template>

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "arkhas/inertia-vue-datatable",
-    "description": "A Laravel package for dynamic datatables using Inertia.js and React.",
+    "description": "A Laravel package for dynamic datatables using Inertia.js and Vue.",
     "type": "library",
     "license": "MIT",
     "require": {

package.json

@@ -26,10 +26,11 @@
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.294.0",
     "radix-vue": "^1.0.0",
-    "reka-ui": "^2.3.1",
+    "reka-ui": "^2.3.2",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "vue": "^3.3.0",
+    "vue-i18n": "^11.1.9",
     "vue-sonner": "^2.0.0",
     "zod": "^3.25.67"
   },

resources/js/DataTable.vue

@@ -1,8 +1,26 @@
 <script setup lang="ts">
-import {columns} from './components/columns'
 import DataTable from './components/DataTable.vue'
-import tasks from './data/tasks.json'
+import { usePage } from '@inertiajs/vue3'
+import { h, provide } from 'vue'
+import { Checkbox } from './components/ui/checkbox'
+import DataTableColumnHeader from './components/DataTableColumnHeader.vue'
+import DataTableRowActions from './components/DataTableRowActions.vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { useTranslation } from './i18n/useTranslation'
+
+// Define props for this component
+const config = defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+
+// Get the translation function and provide it to child components
+const { t } = useTranslation();
+provide('t', t);
+
 </script>
 <template>
-  <DataTable :data="tasks" :columns="columns"/>
-</template>
+  <DataTable :name="config.name"/>
+</template>