F
Filament•2mo ago
nathan

Compact Table style that resembles the RepeatableEntry Table

Is there a way in filament to make a table compact? It is already being done with a RepeatableEntry table - it looks quite nice, in fact. I would love to have that option in a true filament table. Normal Filament Table
No description
2 Replies
nathan
nathanOP•2mo ago
Here is what a RepeatableEntry Table looks like for comparison.
No description
Dennis Koch
Dennis Koch•2mo ago
You just want some tables to be compact? 
return $table
  ->extraAttributes([
     'class' => 'compact',
])
return $table
  ->extraAttributes([
     'class' => 'compact',
])
Create a theme and use this CSS as a staring point. You might need to overwrite more columns, because they have different paddings depending on the type. 
.fi-table.compact {
  .fi-ta-cell.fi-ta-selection-cell,
  .fi-ta-text:not(.fi-inline),
  .fi-ta-cell:has(.fi-ta-actions) {
    padding-block: calc(var(--spacing)*2);
  }
}
.fi-table.compact {
  .fi-ta-cell.fi-ta-selection-cell,
  .fi-ta-text:not(.fi-inline),
  .fi-ta-cell:has(.fi-ta-actions) {
    padding-block: calc(var(--spacing)*2);
  }
}

Did you find this page helpful?