Skip to content

Commit 5d0400b

Browse files
ginkelsoft-developmentginkelsoft-development
authored
Update Readme (#9)
1 parent 081054b commit 5d0400b

File tree

1 file changed

+107
-47
lines changed

1 file changed

+107
-47
lines changed

‎README.md‎

Lines changed: 107 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
# Ginkelsoft DataTables
22

3-
Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular data in your Laravel projects. It supports both a **base DataTable** class for traditional server-rendered apps and an **optional Livewire** component for dynamic, AJAX-driven experiences. You can easily add filtering, searching, sorting, and bulk actions with minimal setup.
3+
Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular data in Laravel projects. It supports both a **base DataTable** class for traditional server-rendered apps and an **optional Livewire** component for dynamic, AJAX-driven experiences. You can easily add filtering, searching, sorting, and bulk actions with minimal setup.
44

55
---
66

77
## Table of Contents
88

99
1. [Requirements](#requirements)
1010
2. [Installation](#installation)
11-
3. [Usage (Without Livewire)](#usage-without-livewire)
12-
4. [Usage (With Livewire)](#usage-with-livewire)
13-
5. [Working with Actions](#working-with-actions)
14-
6. [Additional Features](#additional-features)
15-
7. [Contributing](#contributing)
16-
8. [License](#license)
11+
3. Usage
12+
4. Usage With Livewire
13+
5. [Filters](#filters)
14+
6. [Actions & Bulk Actions](#actions--bulk-actions)
15+
7. [Additional Features](#additional-features)
16+
8. [Contributing](#contributing)
17+
9. [License](#license)
1718

1819
---
1920

@@ -41,72 +42,131 @@ Ginkelsoft DataTables is a flexible and easy-to-use package for managing tabular
4142

4243
---
4344

44-
## Usage (With Livewire)
45+
## Usage
46+
47+
You can use this package in a standard Laravel Blade view without Livewire.
48+
49+
### Example
50+
51+
#### Controller:
52+
53+
```php
54+
use Ginkelsoft\DataTables\DataTable;
55+
use Ginkelsoft\DataTables\Column;
56+
use Ginkelsoft\DataTables\Filters\TextFilter;
57+
use Ginkelsoft\DataTables\Filters\SelectFilter;
58+
use Ginkelsoft\DataTables\Filters\DateFilter;
59+
use Ginkelsoft\DataTables\Filters\BooleanFilter;
60+
use App\Models\User;
61+
62+
public function index()
63+
{
64+
$query = User::query();
65+
66+
$datatable = (new DataTable($query))
67+
->setColumns([
68+
Column::make('id', 'ID'),
69+
Column::make('name', 'Name'),
70+
Column::make('email', 'Email'),
71+
])
72+
->setFilters([
73+
new TextFilter('name'),
74+
new SelectFilter('role', null, ['admin' => 'Admin', 'user' => 'User']),
75+
new DateFilter('created_at'),
76+
new BooleanFilter('active')
77+
])
78+
->setPerPage(10);
79+
80+
$rows = $datatable->getRows();
81+
82+
return view('users.index', compact('rows'));
83+
}
84+
```
4585

46-
If you prefer an **AJAX-driven** workflow with real-time sorting, searching, and pagination:
86+
#### Blade Template:
4787

4888
```blade
49-
<livewire:datatable
50-
model="App\\Models\\User"
51-
:columns="['id', 'name', 'email']"
52-
:actions="[
53-
['label' => 'Edit', 'route' => 'users.edit', 'class' => 'bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded', 'style' => 'margin-right: 5px;'],
54-
['label' => 'Delete', 'route' => 'users.destroy', 'class' => 'bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded']
55-
]"
56-
:bulkActions="[
57-
'delete' => ['label' => 'Delete', 'route' => 'users.bulk.delete'],
58-
'export' => ['label' => 'Export', 'route' => 'users.bulk.export']
59-
]"
60-
/>
89+
<table>
90+
<thead>
91+
<tr>
92+
<th>ID</th>
93+
<th>Name</th>
94+
<th>Email</th>
95+
</tr>
96+
</thead>
97+
<tbody>
98+
@foreach($rows as $row)
99+
<tr>
100+
<td>{{ $row->id }}</td>
101+
<td>{{ $row->name }}</td>
102+
<td>{{ $row->email }}</td>
103+
</tr>
104+
@endforeach
105+
</tbody>
106+
</table>
107+
108+
{{ $rows->links() }}
61109
```
62110

63-
You can now:
111+
### Actions & Bulk Actions
64112

65-
- **Search** by typing in the search field (if your component includes that feature).
66-
- **Sort** by clicking column headers.
67-
- **Paginate** without page reload.
68-
- **Select rows** individually or choose to select all.
113+
#### Row Actions:
69114

70-
---
71-
72-
## Working with Actions
73-
74-
### Row Actions with Custom Attributes
115+
```blade
116+
@foreach($rows as $row)
117+
<a href="{{ route('users.edit', $row->id) }}" class="bg-blue-500 text-white px-3 py-1 rounded">Edit</a>
118+
<a href="{{ route('users.destroy', $row->id) }}" class="bg-red-500 text-white px-3 py-1 rounded">Delete</a>
119+
@endforeach
120+
```
75121

76-
You can now add **custom CSS classes and HTML attributes** to actions:
122+
#### Bulk Actions:
77123

78124
```blade
79-
:actions="[
80-
['label' => 'Edit', 'route' => 'users.edit', 'attributes' => ['class' => 'bg-green-500 text-white px-3 py-1 rounded']],
81-
['label' => 'Delete', 'route' => 'users.destroy', 'attributes' => ['class' => 'bg-red-500 text-white px-3 py-1 rounded', 'onclick' => 'return confirm(\'Are you sure?\')']]
82-
]"
125+
<form action="{{ route('users.bulk.delete') }}" method="POST">
126+
@csrf
127+
<input type="hidden" name="ids" value="{{ implode(',', $selectedRows) }}">
128+
<button type="submit" class="bg-red-500 text-white px-3 py-1 rounded">Delete Selected</button>
129+
</form>
83130
```
84131

85-
These actions will be rendered as buttons with the specified styles.
132+
---
86133

87-
### Bulk Actions
134+
## Usage With Livewire
88135

89-
For bulk actions (like deleting multiple rows), define them as follows:
136+
For an **AJAX-driven** workflow with real-time sorting, searching, and pagination:
90137

91138
```blade
92-
:bulkActions="[
93-
'delete' => ['label' => 'Delete', 'route' => 'users.bulk.delete'],
94-
'export' => ['label' => 'Export', 'route' => 'users.bulk.export']
95-
]"
139+
<livewire:datatable
140+
model="App\\Models\\User"
141+
:columns="['id', 'name', 'email']"
142+
:actions="[
143+
['label' => 'Edit', 'route' => 'users.edit'],
144+
['label' => 'Delete', 'route' => 'users.destroy']
145+
]"
146+
:bulkActions="[
147+
'delete' => ['label' => 'Delete', 'route' => 'users.bulk.delete'],
148+
'export' => ['label' => 'Export', 'route' => 'users.bulk.export']
149+
]"
150+
:filters="[
151+
['column' => 'name', 'type' => 'text'],
152+
['column' => 'role', 'type' => 'select', 'options' => ['admin' => 'Admin', 'user' => 'User']],
153+
['column' => 'created_at', 'type' => 'date'],
154+
['column' => 'active', 'type' => 'boolean']
155+
]"
156+
/>
96157
```
97158

98-
When multiple rows are selected, the component redirects to the specified route with `ids` in the query/string, so you can handle them in your controller.
99-
100159
---
101160

102161
## Additional Features
103162

163+
- **Multi-language Support:** English, Dutch, German, French, Spanish.
104164
- **Search Class** for multi-column searching.
105165
- **Filter Class** for custom filters (status, categories, etc.).
106166
- **Sorting Class** for ascending/descending ordering.
107167
- **Select All** (with confirmation modal) to choose between only visible rows or all rows.
108-
- **Custom Actions** now support custom classes and inline styles.
109-
- **Prevent row selection when clicking an action button**, ensuring that clicking an action does not check the row checkbox.
168+
- **Custom Actions** now support classes and inline styles.
169+
- **Prevent row selection when clicking an action button** to avoid accidental selection.
110170

111171
---
112172

0 commit comments

Comments
 (0)