Table width and columns issue #1350
-
|
If a ListView has many columns some are hidden even if there is a large margin on the right and left as you can see from the screenshots below. 
ps. i'm using updated Laravel 12.x & Backpack 6.x with Tabler theme Thanks for help |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
|
Backpack's ListView uses a responsive table by default. This means that when there are more columns than can fit in the viewport (especially on mobile or smaller screens), less important columns are automatically hidden—even if there appears to be extra margin or space on the sides. This is intentional and is considered the best UX for most use cases, as it keeps the table readable and usable on all devices. The first column and the actions column are considered most important and are prioritized to remain visible. You can adjust the importance of columns using the priority attribute if needed, so certain columns are hidden before others as the screen shrinks. By default, the first and last columns have the highest priority to stay visible, but you can override this per column: $this->crud->addColumn([
'name' => 'details',
'type' => 'text',
'label' => 'Details',
'priority' => 2, // lower number = higher priority to stay visible
]);You can also set the actions column to a very low priority (so it hides first) using: $this->crud->setActionsColumnPriority(10000);See more details in the documentation. If you prefer to always show all columns (even if it means a horizontal scrollbar appears), you can disable the responsive table feature. This can be done globally in your config/backpack/crud.php by setting: 'responsive_table' => falseOr for a specific CRUD panel in your controller's setupListOperation: $this->crud->disableResponsiveTable();There is no fixed "maximum number of columns"—the number of visible columns depends on the available viewport width and the priority settings. If you notice columns hiding even when there seems to be space, it's likely due to how DataTables' responsive plugin calculates available space, which may not always match your visual expectations. If you want to control which columns are visible in different contexts (table, modal, export, etc.), you can use the visibleInTable, visibleInModal, and similar attributes per column: $this->crud->addColumn([
'name' => 'description',
'visibleInTable' => false,
'visibleInModal' => true,
]);See advanced column visibility options. In summary:
Let me know if you need help with a specific configuration! ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️ Relevant sources: change default column limit to 32 |
Beta Was this translation helpful? Give feedback.
-
|
This video show better the issue, The table expands to a certain point and then that's it and the space is not optimized, why? BackpackResponsiveTableBut.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Hello @blondie63 in your /config/backpack/theme-tabler.php try to set Thats will update the container-xl to container-fluid Cheers. |
Beta Was this translation helpful? Give feedback.
-
|
It works fine, Thanks |
Beta Was this translation helpful? Give feedback.
Hello @blondie63
in your /config/backpack/theme-tabler.php try to set
Thats will update the container-xl to container-fluid
Cheers.