# BadgeColumn
Source: https://inertiajs-datatables.eklundlabs.dev/column-types/badge-column



```php theme={null}
use Eklundlabs\InertiaDatatable\Columns\BadgeColumn;

BadgeColumn::make(column: 'role', label: 'Role')
    ->map(['admin' => 'Administrator'])
    ->mapIcon(['admin' => 'BadgeChecked']);
```


# TextColumn
Source: https://inertiajs-datatables.eklundlabs.dev/column-types/text-column



```php theme={null}
use Eklundlabs\InertiaDatatable\Columns\TextColumn;

TextColumn::make(column: 'name', label: 'Name');
```


# Installation
Source: https://inertiajs-datatables.eklundlabs.dev/index



<Warning>
  This package is currently under development and is not intended for production use.
  Please review [current limitations](#) before using it.
</Warning>

<Info>
  **Prerequisites**:

  * Tailwind CSS v4 or higher
  * Laravel v12 or higher
  * Inertia.js v2.1 or higher using react
</Info>

<Steps>
  <Step title="Install the composer package">
    ```bash theme={null}
    composer require eklundlabs/inertiajs-datatables:dev-main
    ```
  </Step>

  <Step title="Install the NPM package">
    ```bash theme={null}
    npm install vendor/eklundlabs/inertiajs-datatables/react
    ```
  </Step>

  <Step title="Register package paths with Tailwind">
    Add the package paths using the `@source` directive in your `app.css` file:

    ```bash theme={null}
    @source '../../vendor/eklundlabs/inertiajs-datatables/react/**/*.{ts,tsx}';
    ```
  </Step>
</Steps>


# Actions
Source: https://inertiajs-datatables.eklundlabs.dev/the-basics/actions



### Adding Actions

To add an action to your table, define it within the `actions` method.
Action buttons are displayed on the far right side of each row.

```php theme={null}
class Users extends Table
{
    protected ?string $resource = User::class;

    public function actions(): array
    {
        return [
            Action::make('Wave', fn (User $user) => logger("Hello user {$user->name}"))
        ];
    }
}
```

### Bulk Actions

By default, an action processes only the row to which it belongs. However, actions can be marked as bulk actions, allowing them to be executed on multiple selected rows at once.

```php theme={null}
Action::make('Wave', fn (User $user) => logger("Hello user {$user->name}"))
    ->asBulk()
```

### Links

In some cases, you may want to add an “Edit” or other link for each row. This is where `asLink` becomes useful.
When an action is marked with `asLink`, the custom response returned by the handler will be used.

```php theme={null}
Action::make('Edit', fn (User $user) => redirect()->route('users.show', $user))
    ->asLink()
    ->icon('UserRoundPen')
```


# Column Renderer
Source: https://inertiajs-datatables.eklundlabs.dev/the-basics/column-renderer



### Custom component renderer

```tsx theme={null}
import { 
  DataTable, 
  type DataTableResource, 
  type DataTableColumn, 
  type DataTableCell 
} from '@eklundlabs/inertia-datatable-react';

const CustomTextColumn = ({
  column,
  data,
}: {
  column: DataTableColumn;
  data: DataTableCell;
}) => (
  <div>
    <span className="font-bold">{column.label}:</span>
    {data.value}
  </div>
);

export default function Users() {
  const { props } = usePage<{
    users: DataTableResource;
  }>();

  return (
    <DataTable
      resource={props.users}
      columnRenderers={{ TextColumn: CustomTextColumn }}
    />
  );
}
```


# Icons Provider
Source: https://inertiajs-datatables.eklundlabs.dev/the-basics/icons-provider



```tsx theme={null}
import * as Icons from 'lucide-react';

export default function Users() {
    const { props } = usePage<{
        users: DataTableResource;
    }>();

    return (
        <DataTable
            resource={props.users}
            iconResolver={(icon) => Icons[icon]}
        />
    );
}
```


# Searching
Source: https://inertiajs-datatables.eklundlabs.dev/the-basics/searching



### Searchable Columns

To make a column searchable, you must explicitly mark it as searchable by using the `searchable` method.

```php theme={null}
TextColumn::make('name', 'Name')
    ->searchable();
```

### Customizing Search

If you require more advanced search functionality than what is provided by this package, you can customize the search behavior by adding `searchUsing` to your table.
In the following example, the `spatie/laravel-searchable` package is used to implement a custom search.

```php theme={null}
use App\Models\User;
use Eklundlabs\InertiaDatatable\Table;
use Spatie\Searchable\Search;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Collection;

class Users extends Table
{
    protected ?string $resource = User::class;

    public function searchUsing(Builder $builder, string $search, Collection $searchableColumns): Builder
    {
        $s = (new Search)
            ->registerModel($this->resource, $searchableColumns->toArray())
            ->limitAspectResults(100)
            ->search($search);

        return $builder->whereIn('id', $s->map->searchable->pluck('id')->toArray());
    }
}
```


# Usage
Source: https://inertiajs-datatables.eklundlabs.dev/the-basics/usage



## Your first datatable

<Steps>
  <Step title="Define your datatable">
    ```php app/Datatables/Users.php theme={null}
    use App\Models\User;
    use Eklundlabs\InertiaDatatable\Table;
    use Eklundlabs\InertiaDatatable\Actions\Action;
    use Eklundlabs\InertiaDatatable\Columns\TextColumn;

    class Users extends Table
    {
        protected ?string $resource = User::class;

        public function columns(): array
        {
            return [
                TextColumn::make('name', 'Namn')
                    ->searchable()
                    ->url(fn(User $user) => route('users.show', $user->id)),
                TextColumn::make('email', 'Email'),
            ];
        }

        public function actions(): array
        {
            return [
                Action::make('Delete', fn (User $user) => $user->delete())
                    ->confirm('Are you sure you want to delete this user?'),
            ];
        }
    }
    ```
  </Step>

  <Step title="Expose the datatable via the Inertia response">
    ```php app/Http/Controllers/UsersController.php theme={null}
    use Inertia\Inertia;
    use App\DataTables\Users;

    class UsersController extends Controller
    {
        public function __invoke(Request $request)
        {
            return Inertia::render('users', [
                'users' => Users::make()
            ]);
        }
    }
    ```
  </Step>

  <Step title="Render it using the DataTable react component">
    ```tsx resources/js/pages/users.tsx theme={null}
    import { usePage } from '@inertiajs/react';
    import { DataTable, type DataTableResource } from '@eklundlabs/inertia-datatable-react';

    export default function UsersListing() {
        const { props } = usePage<{
            users: DataTableResource;
        }>();

        return (<DataTable resource={props.users} />);
    }
    ```
  </Step>
</Steps>