diff options
| -rw-r--r-- | resources/views/components/wrapper.blade.php | 1 | ||||
| -rw-r--r-- | resources/views/table.blade.php | 94 | ||||
| -rw-r--r-- | src/TableComponent.php | 15 |
3 files changed, 67 insertions, 43 deletions
diff --git a/resources/views/components/wrapper.blade.php b/resources/views/components/wrapper.blade.php new file mode 100644 index 0000000..3338f62 --- /dev/null +++ b/resources/views/components/wrapper.blade.php @@ -0,0 +1 @@ +{{ $slot }} diff --git a/resources/views/table.blade.php b/resources/views/table.blade.php index 8812b0c..741a27f 100644 --- a/resources/views/table.blade.php +++ b/resources/views/table.blade.php @@ -1,51 +1,61 @@ -<div> - @foreach($toolbars as $toolbar) - {{ $toolbar?->render() }} - @endforeach - <table class="table"> - <colgroup> - @foreach($columns as $column) - <col @class([$column->getColClass()]) /> - @endforeach - </colgroup> - <thead> - <tr> +<div @class($rootClass)> + + <x-dynamic-component :component="$toolbarsWrapperComponent"> + @foreach($toolbars as $toolbar) + {{ $toolbar?->render() }} + @endforeach + </x-dynamic-component> + + <x-dynamic-component :component="$tableWrapperComponent"> + <table @class($tableClass)> + <colgroup> @foreach($columns as $column) - <th - scope="col" - > - <div - @class([ - 'ordered' => $column->isSortable(), - 'ordered-asc' => $column->name === $order && $orderDirection === 'asc', - 'ordered-desc' => $column->name === $order && $orderDirection === 'desc', - ]) - @if($column->isSortable()) - wire:click="orderBy('{{ $column->name }}')" - @endif - > - {{ $column->getTitle() }} - </div> - </th> + <col @class([$column->getColClass()]) /> @endforeach - </tr> - </thead> - <tbody> - @foreach($data as $row) + </colgroup> + <thead> <tr> @foreach($columns as $column) - {{ $column->view($row) }} + <th + scope="col" + > + <div + @class([ + 'ordered' => $column->isSortable(), + 'ordered-asc' => $column->name === $order && $orderDirection === 'asc', + 'ordered-desc' => $column->name === $order && $orderDirection === 'desc', + ]) + @if($column->isSortable()) + wire:click="orderBy('{{ $column->name }}')" + @endif + > + {{ $column->getTitle() }} + </div> + </th> @endforeach </tr> - @endforeach - </tbody> - </table> - <div class="table-pagination d-flex justify-content-between align-items-center"> - {{ $data->links() }} - <div> - {{ __('Showing') }} {{ $data->count() }} - {{ __('of') }} {{ $data->total() }} + </thead> + <tbody> + @foreach($data as $row) + <tr> + @foreach($columns as $column) + {{ $column->view($row) }} + @endforeach + </tr> + @endforeach + </tbody> + </table> + </x-dynamic-component> + + <x-dynamic-component :component="$paginationWrapperComponent"> + <div class="table-pagination d-flex justify-content-between align-items-center"> + {{ $data->links() }} + <div> + {{ __('Showing') }} {{ $data->count() }} + {{ __('of') }} {{ $data->total() }} + </div> </div> - </div> + </x-dynamic-component> + </div> diff --git a/src/TableComponent.php b/src/TableComponent.php index e50fdb3..8e84d50 100644 --- a/src/TableComponent.php +++ b/src/TableComponent.php @@ -42,6 +42,13 @@ abstract class TableComponent extends Component protected int $defaultPageSize = 10; + protected ?string $rootClass = null; + protected string $tableClass = 'table'; + + protected string $tableWrapperComponent = 'laralight-tables::wrapper'; + protected string $paginationWrapperComponent = 'laralight-tables::wrapper'; + protected string $toolbarsWrapperComponent = 'laralight-tables::wrapper'; + // Properties #[Url] public string $search = ''; @@ -251,7 +258,13 @@ abstract class TableComponent extends Component Paginator::defaultView('laralight-tables::pagination'); - return view('laralight-tables::table', compact( + return view('laralight-tables::table', [ + 'rootClass' => $this->rootClass, + 'tableClass' => $this->tableClass, + 'tableWrapperComponent' => $this->tableWrapperComponent, + 'paginationWrapperComponent' => $this->paginationWrapperComponent, + 'toolbarsWrapperComponent' => $this->toolbarsWrapperComponent, + ] + compact( 'data', 'allColumns', 'columns', 'toolbars', )); } |