Skip to content

docs: screenshots of all datagrid features + missing feature audit#389

Open
f3l1x wants to merge 3 commits intomasterfrom
fx/screenshots
Open

docs: screenshots of all datagrid features + missing feature audit#389
f3l1x wants to merge 3 commits intomasterfrom
fx/screenshots

Conversation

@f3l1x
Copy link
Copy Markdown
Member

@f3l1x f3l1x commented Apr 8, 2026

Summary

  • Added 25 screenshots covering all 15 demo pages plus interactive states (expanded details, inline editing, tree view expansion, multi-action dropdowns, group selection, hideable columns, outer filters)
  • Conducted comprehensive feature audit comparing the skeleton against the full contributte/datagrid API
  • Implemented many missing features across existing and new demo pages (Sorting, ColumnsSummary, ArrayDatasource, StateStorage, Events)

Screenshots

Page Static Interactive
Home 00-home.png
Filters 01-filters.png
Outer Filters 02-outer-filters.png 02-outer-filters-expanded.png
Columns 03-columns.png 03-columns-hideable.png
Actions 04-actions.png 04-actions-multiaction.png
Group Actions 05-group-actions.png 05-group-actions-selected.png
Row 06-row.png
ItemDetail 07-item-detail.png 07-item-detail-expanded.png
Export 08-export.png
TreeView 09-tree-view.png 09-tree-view-expanded.png
Edit 10-edit.png 10-edit-inline.png
Add 11-add.png 11-add-inline.png
Localization 12-localization.png
CDN 13-cdn.png
No Pagination 14-no-pagination.png

Missing Features Audit

The following features from contributte/datagrid are tracked below:

High Priority (Core features users commonly need)

Data Sources

  • Array datasource demo — new ArrayDatasource page with in-memory data
  • Doctrine QueryBuilder datasource demo
  • Nette\Database\Table datasource demo

Sorting

  • Multi-sort (setMultiSortEnabled()) — new Sorting page
  • Custom sort callback (setSortableCallback()) — new Sorting page (sorts by name length)
  • Sort reset pagination (setSortableResetPagination()) — new Sorting page

Filters

  • Split words search (setSplitWordsSearch()) in FilterText — Filters page, name column
  • Conjunction search (setConjunctionSearch()) in FilterText — Filters page, name column
  • Custom filter template (setTemplate() on filter)
  • Filter blocks in Latte ({block filter-name})
  • Auto submit toggle (setAutoSubmit()) — Filters page
  • URL refresh (setRefreshUrl()) — Filters and StateStorage pages
  • Column reset button (setColumnReset()) — Filters page
  • Shareable filter URLs via Datagrid::$formMethod = 'GET'

State Storage

  • Remember state (setRememberState()) — new StateStorage page
  • Session state storage (SessionStateStorage) — used by default with setRememberState()
  • Noop state storage (NoopStateStorage)
  • Custom state storage implementation example

Medium Priority (Useful features)

Column Features

  • ColumnNumber formattingColumns page, countries_visited with setFormat(0, '.', ',')
  • Remove column (removeColumn())
  • Columns order (setColumnsOrder()) — Columns page
  • Columns export order (setColumnsExportOrder()) — Export page
  • Open in new tab (setOpenInNewTab() on ColumnLink) — Columns page, email column

Columns Summary

  • Standard columns summary (setColumnsSummary()) — new ColumnsSummary page
  • Custom summary format (setFormat() per summary column) — new ColumnsSummary page
  • Predefined aggregation functions (addAggregationFunction() with FunctionSum) — mutually exclusive with setColumnsSummary()

Actions

  • Callback confirmation (CallbackConfirmation) — Actions page, archive action
  • Bootstrap modal confirmation — using modal HTML in template

Group Actions

  • Group select action (addGroupSelectAction()) — GroupActions page
  • Group multi-select action (addGroupMultiSelectAction()) — GroupActions page
  • Group textarea action (addGroupTextareaAction()) — GroupActions page
  • Show selected rows count (setShowSelectedRowsCount()) — GroupActions page

Item Detail

  • Detail via renderer callback (instead of template)
  • Detail form (setItemsDetailForm()) — ItemDetail page
  • Template parameters (setTemplateParameters()) — ItemDetail page
  • Render condition (setRenderCondition()) — ItemDetail page (active users only)

Export

  • Export encoding configuration — Export page (windows-1250 encoding)
  • Export delimiter configuration — Export page (comma delimiter)

Low Priority (Advanced/edge-case features)

Row Features

  • Allow rows inline edit (allowRowsInlineEdit()) — Edit page (even IDs only)
  • Allow rows multi-action (allowRowsMultiAction()) — Row page (conditional per sub-action)

Events/Hooks

  • onRedraw event — new Events page
  • onRender event — new Events page
  • onExport event
  • onColumnAdd event — new Events page
  • onColumnShow / onColumnHide events — new Events page
  • onFiltersAssembled event — new Events page

Templates

  • Column definition blocks ({define col-<key>})
  • Column header blocks ({define col-<key>-header})
  • Icon blocks ({block icon-sort}, etc.)
  • Custom paginator template (setCustomPaginatorTemplate())

Inline Edit

  • Custom redraw (onCustomRedraw) after inline edit — Edit page

Pagination

  • Default per page (setDefaultPerPage()) — ArrayDatasource page (default 5)

Miscellaneous

  • Form method GET (Datagrid::$formMethod = 'GET')
  • Send non-empty filters in payload (sendNonEmptyFiltersInPayload())
  • Strict entity property mode

Test plan

  • All 15 demo pages load and render correctly
  • Interactive features work (inline edit, item detail expand, tree view, group actions)
  • Screenshots are clear and show the feature in action
  • Review missing features list for accuracy and prioritization

Screenshots of all 15 demo pages with interactive states:
- Home, Filters, Outer Filters (expanded), Columns (hideable dropdown)
- Actions (multi-action dropdown), Group Actions (rows selected)
- Row styling, ItemDetail (expanded), Export, TreeView (expanded)
- Edit (inline editing), Add (inline form), Localization (Czech)
- CDN, No Pagination
@coveralls
Copy link
Copy Markdown

coveralls commented Apr 8, 2026

Coverage Report for CI Build 24172195446

Coverage decreased (-0.2%) to 0.623%

Details

  • Coverage decreased (-0.2%) from the base build.
  • Patch coverage: 179 uncovered changes across 13 files (0 of 179 lines covered, 0.0%).
  • 6 coverage regressions across 5 files.

Uncovered Changes

Top 10 Files by Coverage Impact Changed Covered %
app/UI/GroupActions/GroupActionsPresenter.php 32 0 0.0%
app/UI/Events/EventsPresenter.php 27 0 0.0%
app/UI/ArrayDatasource/ArrayDatasourcePresenter.php 21 0 0.0%
app/UI/Sorting/SortingPresenter.php 20 0 0.0%
app/UI/ColumnsSummary/ColumnsSummaryPresenter.php 17 0 0.0%
app/UI/StateStorage/StateStoragePresenter.php 17 0 0.0%
app/UI/Actions/ActionsPresenter.php 12 0 0.0%
app/UI/ItemDetail/ItemDetailPresenter.php 10 0 0.0%
app/UI/Filters/FiltersPresenter.php 6 0 0.0%
app/UI/Columns/ColumnsPresenter.php 5 0 0.0%

Coverage Regressions

6 previously-covered lines in 5 files lost coverage.

File Lines Losing Coverage Coverage
app/UI/Edit/EditPresenter.php 2 0.0%
app/UI/Columns/ColumnsPresenter.php 1 0.0%
app/UI/Export/ExportPresenter.php 1 0.0%
app/UI/GroupActions/GroupActionsPresenter.php 1 0.0%
app/UI/Row/RowPresenter.php 1 0.0%

Coverage Stats

Coverage Status
Relevant Lines: 803
Covered Lines: 5
Line Coverage: 0.62%
Coverage Strength: 0.01 hits per line

💛 - Coveralls

f3l1x added 2 commits April 9, 2026 06:19
New demo pages:
- Sorting: multi-sort, custom sort callback, sort reset pagination
- ColumnsSummary: columns summary with custom format
- ArrayDatasource: array data source with default per page
- StateStorage: remember state with session storage
- Events: onRedraw, onRender, onColumnAdd, onFiltersAssembled, onColumnShow/Hide

Enhanced existing pages:
- Filters: split words search, conjunction search, auto submit, column reset, URL refresh
- Columns: number format, columns order, open in new tab
- Actions: CallbackConfirmation for dynamic confirmation messages
- GroupActions: group select/multi-select/textarea actions, show selected rows count
- ItemDetail: detail form, template parameters, render condition
- Export: encoding/delimiter config, columns export order
- Edit: allowRowsInlineEdit, onCustomRedraw
- Row: allowRowsMultiAction with conditional sub-actions

Also: disable Tracy debug bar in docker-compose, retake all screenshots without debug bar
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants