Expandable Rows
Hi i want to ask, is there any chance in filament, we can do expandable rows. it's not like collapsable . means like, in table filament, have button to expand row, when user click expand, the details in expand row also another table. i dont find any solution here.
4 Replies
You can use Split, the downside of using this approach is the fact you lose the table headers. You can go from this example:
public static function getTableColumns($articleTypeWithSize = null):array
{
return [
Split::make([
TextColumn::make(name: 'identifier')
->label(label: __(key: 'crud.clients.inputs.identifier'))
->searchable()
->alignCenter()
->tooltip(tooltip: __(key: 'crud.clients.inputs.identifier'))
->sortable()
]),
View::make('tables.article-types-collapsible-row-content')
->components(components: function ($record) use($articleTypeWithSize): array {
if ($record !== null) {
$children = $record->assignedArticleTypesWithSizes()->where('article_type_id', $articleTypeWithSize->article_type_id)->where('is_unique_size',false)->get();
$components = [];
foreach ($children as $child) {
$components[] = Panel::make(schema: [
TextColumn::make('name')
->label('name')
->tooltip(tooltip: 'name')
->getStateUsing(callback: fn() => $child->articleType->name)
->alignCenter()
->toggleable(),
])->extraAttributes(attributes: ['class' => 'flex']);
}
return $components;
}
return [];
})
->collapsible()
];
}
public static function getTableColumns($articleTypeWithSize = null):array
{
return [
Split::make([
TextColumn::make(name: 'identifier')
->label(label: __(key: 'crud.clients.inputs.identifier'))
->searchable()
->alignCenter()
->tooltip(tooltip: __(key: 'crud.clients.inputs.identifier'))
->sortable()
]),
View::make('tables.article-types-collapsible-row-content')
->components(components: function ($record) use($articleTypeWithSize): array {
if ($record !== null) {
$children = $record->assignedArticleTypesWithSizes()->where('article_type_id', $articleTypeWithSize->article_type_id)->where('is_unique_size',false)->get();
$components = [];
foreach ($children as $child) {
$components[] = Panel::make(schema: [
TextColumn::make('name')
->label('name')
->tooltip(tooltip: 'name')
->getStateUsing(callback: fn() => $child->articleType->name)
->alignCenter()
->toggleable(),
])->extraAttributes(attributes: ['class' => 'flex']);
}
return $components;
}
return [];
})
->collapsible()
];
}
Im sending an image so it becomes more readable. In the view i just have
<div class="px-4 py-3 bg-gray-100 rounded-lg" x-data="{
{{-- init() {
const updateRows = () => {
const rows = document.querySelectorAll('.collapsible-row');
rows.forEach(row => {
row.setAttribute('x-on:click', 'isCollapsed = ! isCollapsed');
});
};
// Run the updateRows function every 2 seconds
setInterval(updateRows, 100);
// Optionally, run it immediately once on init
updateRows();
} --}}
}">
{{-- @dd($getComponents()) --}}
<x-filament-tables::columns.layout :components="$getComponents()" :record="$getRecord()" :record-key="$recordKey" />
</div>
<div class="px-4 py-3 bg-gray-100 rounded-lg" x-data="{
{{-- init() {
const updateRows = () => {
const rows = document.querySelectorAll('.collapsible-row');
rows.forEach(row => {
row.setAttribute('x-on:click', 'isCollapsed = ! isCollapsed');
});
};
// Run the updateRows function every 2 seconds
setInterval(updateRows, 100);
// Optionally, run it immediately once on init
updateRows();
} --}}
}">
{{-- @dd($getComponents()) --}}
<x-filament-tables::columns.layout :components="$getComponents()" :record="$getRecord()" :record-key="$recordKey" />
</div>
did u have filter ?
No, I wasn't using any filters. I don't know how it would interact either.