Display content (from database) in feature-rich datatables.
resources/js/Components/DataTable/Index.vue
Package: TanStack Table
Vue
file component using Inertia::render()
from your Controller.
Properties data
and columns
are required, while filters
prop is optional.
Admin/Users/Index
, define the props (using DataTableProps
type) and render the DataTable
component.
app/Http/Controllers/Admin/UserController.php
, or any similar Controller, and check out index
method to see how columns are generated.
Columns are generated via Column::class
, as seen in the code example above.make
method. All other methods are optional.
name
column will be Name, for email
will be Email, and so on.
check
icon for true
and x
icon for false
.
tailwind.config.js
under safelist
array.
resources/js/lib/utils.ts
and update function mapColumns
as you wish.
You can check by accessorKey
(which is mapped from column name/ID) for specific columns, or you can define new renderAs
method for common columns.
Some of specifically rendered columns are id
session_id
thumb
badge
and status
.
To update or add Column properties go to file app/Services/DataTable/Column.php
.
columns
array.show
will be Show, for edit
will be Edit, etc.
delete
and restore
are confirmable by default.
trashed
column value is false
.
show
, edit
, delete
and restore
(when Model can be soft-deleted).
If you need to update your default actions, you can do it here: app/Services/DataTable/ActionColumn.php
in method private function getDefaults(): array
.
make()
method accepts two optional parameters: renderAs
and route
.render()
method of 1.
app/Http/Controllers/Admin/FaqController.php
is using such custom actions.resources/js/Pages/Admin/Faq/Index.vue
verified
, blocked
and trashed
.
Create filter using make()
method which accepts one prop for filter title.
value
and label
props.
resources/js/Components/DataTable/Index.vue
file and update default values for rowsPerPage
and pageSize
props.
To update defaults for specific datatable you can pass those props via controller:
AdminTestimonialController.php
controller file.