add Datagrid and Datalist components #5810

tabacitu · 2025-06-12T10:30:37Z

This PR brings the following changes to the Show operation:

moves the table that echoes an entity's attributes... to a component we call Datalist
adds a new component called Datagrid, as an alternative to that;
adds a configuration option for the Show operation, where the developer can specify what component they want the Show operation to use - bp-datagrid or bp-datalist;

To test this PR, you only need to checkout this branch, then inside your config/backpack/operations/show.blade.php add this item and play around with the two options:

    // Which component to use for displaying the Show page?
    'component' => 'bp-datagrid', // options: bp-datagrid, bp-datalist, or a custom component alias

Done

Datalist component

This looks and works exactly the same as before, I haven't changed anything, only moved the code to a component:

Datagrid component

This looks and works similary, but shows the info in a grid, so that it takes up less space:

Todo

To finish this up, we need to:

review this;
consider if we want to change some filenames as well (eg. now show_table.blade.php loads either the table aka datalist or the datagrid, so that's not quite accurate);
consider if we want a different alias for components (right now this adds aliases for all components in the format bp-datagrid, bp-datalist etc.);
allow the developer to specify the SIZE of a datagrid-item; don't know if we should make it ->size(12) like we have in fields (for consistency) or a different way that makes more sense for the actual HTML and CSS of the datagrid;
add CSS to both theme-coreuiv2 and theme-coreuiv4 to show a nice grid like the theme-tabler does;

[ci skip] [skip ci]

src/BackpackServiceProvider.php

src/resources/views/crud/components/datagrid.blade.php

src/resources/views/crud/components/datalist.blade.php

tabacitu · 2025-06-12T10:37:26Z

src/resources/views/crud/inc/show_table.blade.php

Unhappy with this file because it's now called show_table.blade.php and it doesn't ACTUALLY load a table, it loads either a table or a grid (that we call datalist and datagrid).

We can probably

(A) rename this to show_component;

(B) scrap this file entirely and use the component directly in the operation blade file and in the show_tabbed_table.blade.php file... which prooobably should be called show_tabs or something like that;

Let's keep it like this for now, to keep changes to a minimum. We can rename/refactor in separate PRs if we think it's worth it.

src/config/backpack/operations/show.php

[ci skip] [skip ci]

src/ViewNamespaces.php

that way you can use this component anywhere you want, to show the details of one entry

…nto datagrid

src/app/View/Components/Datagrid.php

tabacitu · 2025-06-18T13:31:23Z

src/resources/assets/css/common.css

+    text-transform: uppercase;
+    letter-spacing: .04em;
+    line-height: 1rem;
+    color: #66626c;


@tabacitu put this color in a CSS variable

src/app/View/Components/Datagrid.php

src/app/View/Components/Datalist.php

tabacitu · 2025-06-18T13:54:26Z

src/app/View/Components/Datagrid.php

Can you use EditableColumns inside this component?! What happens then?

They don't work - they throw a JS error. Buuuut. I don't think it's because of the component itself... because they don't work inside the ShowOperation either!

[ci skip] [skip ci]

tabacitu

All seems to work now. Needs:

docs
examples in Demo
testing with editable columns

…nto datagrid # Conflicts: # src/app/View/Components/ShowComponent.php

Co-authored-by: StyleCI Bot <[email protected]>

* Uploaders - Refactor and fixes (#5478) * add method to get ajax uploaders * Apply fixes from StyleCI [ci skip] [skip ci] * use an abstract class * wip * Apply fixes from StyleCI [ci skip] [skip ci] * refactor uploaders * Apply fixes from StyleCI [ci skip] [skip ci] * refactor rules * Apply fixes from StyleCI [ci skip] [skip ci] * move ajax to PRO, cleanup * Apply fixes from StyleCI [ci skip] [skip ci] * make attributes available for all subfields * fix tests * wip * Apply fixes from StyleCI [ci skip] [skip ci] * upload multiple and upload properly working 🙏 * fixes * Apply fixes from StyleCI [ci skip] [skip ci] * allow the configuration of valueWithoutPath call. * fix valid upload inside repeatables * Apply fixes from StyleCI [ci skip] [skip ci] * fix condition * cleanup * fix * Apply fixes from StyleCI [ci skip] [skip ci] * fix use case for enabling validation after entry is created * Apply fixes from StyleCI [ci skip] [skip ci] * dont save array keys * fix ajax validation * fix validation messages * Apply fixes from StyleCI [ci skip] [skip ci] * fixes ValidUpload * Apply fixes from StyleCI [ci skip] [skip ci] * dont json encode if casted in the model * Apply fixes from StyleCI [ci skip] [skip ci] * fix previous file identification in repeatable * Apply fixes from StyleCI [ci skip] [skip ci] * fix getting values * Apply fixes from StyleCI [ci skip] [skip ci] * add fake fields support * Apply fixes from StyleCI [ci skip] [skip ci] * wip add uploaders tests * Apply fixes from StyleCI [ci skip] [skip ci] * wip * Apply fixes from StyleCI [ci skip] [skip ci] * add pro columns * fix test suite * fix tests * ffix tests * remove unused test views * add uploaders to test coverage * Apply fixes from StyleCI [ci skip] [skip ci] * add coverage folder to gitignore * make tests run faster by not reloading db when not necessary * add coverage to validation tests * add fake tests to uploaders * Apply fixes from StyleCI [ci skip] [skip ci] * add more tests * Apply fixes from StyleCI [ci skip] [skip ci] * wip * Apply fixes from StyleCI [ci skip] [skip ci] * wip * wip * Apply fixes from StyleCI [ci skip] [skip ci] * wip * Apply fixes from StyleCI [ci skip] [skip ci] * add more upload assets * fixes * Apply fixes from StyleCI [ci skip] [skip ci] * fix single file * Apply fixes from StyleCI [ci skip] [skip ci] * add image column * fix tests * Apply fixes from StyleCI [ci skip] [skip ci] * remove hardcoded macro names * Apply fixes from StyleCI [ci skip] [skip ci] * remove double loop, fix single file uploader * Apply fixes from StyleCI [ci skip] [skip ci] * use a big increments and unsigned for primary key * handle pivot file deletion * Apply fixes from StyleCI [ci skip] [skip ci] * register events for relation models * Apply fixes from StyleCI [ci skip] [skip ci] * fix typo * Apply fixes from StyleCI [ci skip] [skip ci] * fix relationship uploaders * Apply fixes from StyleCI [ci skip] [skip ci] * wip * Apply fixes from StyleCI [ci skip] [skip ci] * wip * Apply fixes from StyleCI [ci skip] [skip ci] * update temporary time key * save objects in the macro --------- Co-authored-by: StyleCI Bot <[email protected]> * trigger testing forkflow on PR * Clean up uploaders (#5725) * wip * clean up * add get uploadedFilesFromRequest to clean up uploaders * Apply fixes from StyleCI [ci skip] [skip ci] * fix type cast * add summernote uploader * update summernote * add summernote * add more test assets --------- Co-authored-by: StyleCI Bot <[email protected]> * allow datatable url configuration (#5713) * use next branch for basset * require alpha version * bump basset version * Lifecycle hooks for CRUD operations (#5687) * wip * Apply fixes from StyleCI [ci skip] [skip ci] * tidy up * Apply fixes from StyleCI [ci skip] [skip ci] * panel hooks * Apply fixes from StyleCI [ci skip] [skip ci] * refactoring :broom * finish implementing hooks * Apply fixes from StyleCI [ci skip] [skip ci] * refactoring hooks * Apply fixes from StyleCI [ci skip] [skip ci] * add hook to delete * allow empty parameters * wip --------- Co-authored-by: StyleCI Bot <[email protected]> * "Agnostic" filters - decouple filters from datatables (#5714) * wip * wip * Apply fixes from StyleCI [ci skip] [skip ci] * wip * Apply fixes from StyleCI [ci skip] [skip ci] * remove filters navbar component --------- Co-authored-by: StyleCI Bot <[email protected]> * bump basset version * Update composer.json * Apply fixes from StyleCI [ci skip] [skip ci] * datatable component (#5688) Co-authored-by: StyleCI Bot <[email protected]> Co-authored-by: Cristian Tabacitu <[email protected]> * move the list heading to the datatable component (#5808) * add Datagrid and Datalist components (#5810) Co-authored-by: StyleCI Bot <[email protected]> * Form component (no ajax form) (#5814) Co-authored-by: StyleCI Bot <[email protected]> Co-authored-by: Cristian Tabacitu <[email protected]> * dataform component fixes (#5816) Co-authored-by: StyleCI Bot <[email protected]> * Added general chip blade file and chip widget (#5815) * Fix Form issues, Add *name* argument to forms (#5817) Co-authored-by: StyleCI Bot <[email protected]> * Drop support for Laravel 10 and 11 (#5819) * Fix hooks at setup level (#5818) Co-authored-by: StyleCI Bot <[email protected]> * install dev-next version of generators * require basset beta version (#5821) * fix scripts on table * fix the keyboard shortcuts on forms * ensure proper crud identification * fix hooks * fix crud field javacript issue * pass the form id to form content * add error page translations * fix export buttons * wip * wip * wip * map the ui files * fix table without export buttons * always focus on error field * delete button redirect * Apply fixes from StyleCI [ci skip] [skip ci] * Fix padding in name * Fix checkbox padding * Background of select2 * multiple fixes * fix form error highlight * wip * Add toggle to JSON * allow user to choose locale and timezone * fixes bulk actions * fix the filter navbar * fix line buttons dropdown * wip * wip * wip * wip * wip * DataFormModal component (#5863) Co-authored-by: StyleCI Bot <[email protected]> Co-authored-by: Cristian Tabacitu <[email protected]> Co-authored-by: Cristian Tăbăcitu <[email protected]> * wip * wip * wip * Save action classes (#5878) Enable the usage of classes to describe the save actions. This allow more flexibility and easy to extend and/or configure behaviour. * add cancel button option to modal form (#5881) * fix problem with checklist_dependency field in Update operation * fix indentation * Update src/app/Console/Commands/Install.php * Update composer.json --------- Co-authored-by: Pedro Martins <[email protected]> Co-authored-by: StyleCI Bot <[email protected]> Co-authored-by: jcastroa87 <[email protected]> Co-authored-by: zachweix <[email protected]>

tabacitu and others added 2 commits June 12, 2025 13:21

add datagrid and datalist components for use inside the Show operation

3635809

Apply fixes from StyleCI

994a8ae

[ci skip] [skip ci]

tabacitu assigned tabacitu and pxpm Jun 12, 2025

tabacitu added Priority: SHOULD Size: S 1 day labels Jun 12, 2025

tabacitu added this to This week and Backpack v7.0 Jun 12, 2025

tabacitu moved this to In Review in Backpack v7.0 Jun 12, 2025

tabacitu moved this to Needs Testing, Review or Docs in This week Jun 12, 2025

tabacitu commented Jun 12, 2025

View reviewed changes

src/BackpackServiceProvider.php Show resolved Hide resolved

tabacitu commented Jun 12, 2025

View reviewed changes

src/resources/views/crud/components/datagrid.blade.php Outdated Show resolved Hide resolved

tabacitu commented Jun 12, 2025

View reviewed changes

src/resources/views/crud/components/datalist.blade.php Outdated Show resolved Hide resolved

tabacitu commented Jun 12, 2025

View reviewed changes

pxpm added the v7 label Jun 16, 2025

tabacitu commented Jun 17, 2025

View reviewed changes

src/config/backpack/operations/show.php Show resolved Hide resolved

tabacitu and others added 2 commits June 17, 2025 12:01

remove view processing from datalist and datacomponent blade files

64b8fae

Apply fixes from StyleCI

59aec28

[ci skip] [skip ci]

tabacitu commented Jun 17, 2025

View reviewed changes

src/ViewNamespaces.php Show resolved Hide resolved

tabacitu added 2 commits June 17, 2025 12:12

datalist and datagrid should have $crud nullable

a4c26a2

that way you can use this component anywhere you want, to show the details of one entry

Merge branch 'datagrid' of https://github.com/Laravel-Backpack/CRUD i…

e203a33

…nto datagrid

tabacitu commented Jun 17, 2025

View reviewed changes

src/app/View/Components/Datagrid.php Outdated Show resolved Hide resolved

tabacitu added 6 commits June 17, 2025 12:34

display actions column by default

efbe5e9

add ability to size datagrid columns

979484a

make the datagrid responsive

1e8e186

fix actions showing twice

e4f8f46

polish datalist and datagrid component signatures

0028f88

small fix

23f89a4

tabacitu commented Jun 17, 2025

View reviewed changes

src/app/View/Components/Datagrid.php Show resolved Hide resolved

tabacitu mentioned this pull request Jun 17, 2025

add datagrid to Demo Laravel-Backpack/demo#699

Merged

tabacitu commented Jun 18, 2025

View reviewed changes

src/app/View/Components/Datagrid.php Outdated Show resolved Hide resolved

tabacitu commented Jun 18, 2025

View reviewed changes

src/app/View/Components/Datalist.php Outdated Show resolved Hide resolved

tabacitu commented Jun 18, 2025

View reviewed changes

tabacitu and others added 3 commits June 19, 2025 10:42

fix

50b42e4

add support for $controller in Datagrid and Datalist components

bbd4421

Apply fixes from StyleCI

bb53b44

[ci skip] [skip ci]

tabacitu commented Jun 19, 2025

View reviewed changes

tabacitu added 3 commits June 19, 2025 12:50

support collection for $columns in Datalist and Datagrid components

acca4ac

Merge branch 'datagrid' of https://github.com/Laravel-Backpack/CRUD i…

d7ffc4a

…nto datagrid # Conflicts: # src/app/View/Components/ShowComponent.php

fix used classes

35dbd19

tabacitu merged commit 5087c1d into next Jun 19, 2025
27 checks passed

github-project-automation bot moved this from In Review to Done in Backpack v7.0 Jun 19, 2025

github-project-automation bot moved this from Needs Testing, Review or Docs to Done in This week Jun 19, 2025

tabacitu deleted the datagrid branch June 19, 2025 12:05

pxpm pushed a commit that referenced this pull request Nov 21, 2025

add Datagrid and Datalist components (#5810)

846167e

Co-authored-by: StyleCI Bot <[email protected]>

pxpm pushed a commit that referenced this pull request Nov 21, 2025

add Datagrid and Datalist components (#5810)

5e93f49

Co-authored-by: StyleCI Bot <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

add Datagrid and Datalist components #5810

add Datagrid and Datalist components #5810

Uh oh!

tabacitu commented Jun 12, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tabacitu Jun 12, 2025 •

edited

Loading

Uh oh!

tabacitu Jun 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tabacitu Jun 18, 2025

Uh oh!

Uh oh!

Uh oh!

tabacitu Jun 18, 2025

Uh oh!

tabacitu Jun 19, 2025

Uh oh!

tabacitu left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

add Datagrid and Datalist components #5810

add Datagrid and Datalist components #5810

Uh oh!

Conversation

tabacitu commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Done

Datalist component

Datagrid component

Todo

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tabacitu Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tabacitu Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tabacitu Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tabacitu Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

tabacitu Jun 19, 2025

Choose a reason for hiding this comment

Uh oh!

tabacitu left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tabacitu commented Jun 12, 2025 •

edited

Loading

tabacitu Jun 12, 2025 •

edited

Loading

tabacitu left a comment •

edited

Loading