Commit Graph

25 Commits

Author SHA1 Message Date
Paul Marbach c4a5d86a69 Table: JSONCell should use formatted text 2025-10-02 11:31:51 -04:00
Paul Marbach bb9b890e8c
Table: Styling from field (#110991)
* Table: Styling from field

* fix mistake with gdev

* e2e for kitchen sink

* add counter-example in e2e for completeness

* unit tests for utils

* update to store style field per-column, replace util

* optimize branches column-level variables
2025-09-15 10:34:12 -05:00
Paul Marbach cb37539ed7
Table: Fix logic to calculate footer height (#110954)
* Table: Fix logic to calculate footer height

* add non-numeric footer case to gdev

* Update packages/grafana-ui/src/components/Table/TableNG/utils.ts

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* Update packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2025-09-12 17:22:30 -04:00
Alex Spencer 6c9faa7595
TableNG: Footer enhancements (#102948)
* Table: Footer support for multiple reducers

* fix migrator test output due to required default value

* fix go migration test

* more go test fixes

* fix go tests for footer

* Merge #110062

* update migration dashboard

* Small docs fixes

* Small docs fix

* remove migration method in Go, update js unit test

* add migration dashboard for footer and clean up some issues with countAll

* Footer should always use og rows for calcs

* update footer to be unaffected by filtering and sorting

* more e2es

* add more complex footer to kitchen sink, migrate panel all the way up

* update codeowners for e2e

* relocate footer migration panels and e2es to main 12.2 migration dashboard

* go further with the migration; kill unused fields, rename reducer to reducers

* get the go code up to date, move enablePagination to its own option as well

* add a unit to one of the numeric columns with a footer in kitchen sink

* fix reducers override in kitchen sink migration table

---------

Co-authored-by: Paul Marbach <paul.marbach@grafana.com>
Co-authored-by: Isabel Matwawana <isabel.matwawana@grafana.com>
Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2025-09-03 18:03:33 -04:00
Paul Marbach b22f15ad16
Table: Max row height for variable height rows (#109639)
* Table: Max height for wrapped content

* Docs: tableNG max cell height (#110069)

Co-authored-by: Paul Marbach <paul.marbach@grafana.com>

* change to Max row height instead of Max cell height

* fix unit test

* table utils codeowners

* Update packages/grafana-ui/src/components/Table/TableNG/utils.ts

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* update docs

* fix docs

* Revert "fix unit test"

This reverts commit c46b0f1bec.

* fix unit test

* trade one important for another

* Tweaked wording

* hover overflow for max row height

* get rid of commented out section

* and we did it without important

* centralize overflow for max height assessment

* some alignment stuff was busted

* didn't end up using the max heigh arg for shouldTextOverflow

* make i18n path more consistent

* put some tooltip things back since they ultimately didnt change

* we can simplify the :not selector

* delete comment

* don't bother with :not

---------

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2025-08-29 15:10:17 -04:00
Paul Marbach 76b1e5e389
Table: Migrate to field-level wrapText toggle, use standard hideFrom.viz for hidden fields (#109297)
* Added wrap text to table options and removed from multiple cell options

* Removed wrap text from cell options shared file

* Edited

* Edited

* Table: Migrate to field-level wrapText toggle

* migrate hidden -> hideFrom.viz as well

* more cleanup from rebase

* restore options that got killed in the rebase

* when wrap text is enabled for the whole table, exclude columns that do not make sense

* fix TableNG unit tests

* fix i18n

* unit tests for the migrations

* sort out e2e issue

* fix migration unit test

* fix backend migration test as well

* add a dashboard for the v12.2 table migrations

* update dev-dashboards.lisonnet

* make gen-jsonnet

* one of the panel versions didnt get updated

---------

Co-authored-by: Isabel Matwawana <isabel.matwawana@grafana.com>
2025-08-27 16:37:02 -04:00
Paul Marbach 67502a5a7c
Table: Color text, color background, and apply to row can co-mingle (#109939)
* Table: Color text, color background, and apply to row can co-mingle

* fix test

* lean on existing memoization and utils more

* just make that method a prop of TableCellRenderer

* add prop to tooltip stuff as well

* fix another test

* update TableNG with apply to row mixed color cell table

* simplify color overrides table

* special case: apply to row transparent bg

* add unit test

* delete erroneous import

* update for readability
2025-08-25 19:47:11 +00:00
Paul Marbach 950423903f
Table: Refactor row height to work in pxs instead of lines (#109735)
* Table: Refactor row height to work in pxs instead of lines

* non-string pill value handling, internal cleanup on buildCellHeightMeasurers

* no need to round up to max line
2025-08-20 16:31:20 -04:00
Paul Marbach 66eee1cb08
Table: Tooltip from Field (#109428)
* Table: Tooltip by Field

* add colorization support

* more progress on customizing the tooltip based on cell customization

* configurable as an option

* tooltip triggered from a chip in the corner, pinning tooltip

* i18n

* use enum where appropriate

* correctly orient the tooltip to the cell - but at what cost

* clean up some console.logs

* e2e test for the tooltip

* fix global click stuff

* remove console.log

* refine the style of the caret

* caret placement on same-side as alignment to avoid collision with inspect hover

* some updates from self-review

* increase hit target of tooltip caret

* fix width and height auto-sizing especially for dynamic height

* reorganize to pre-calc the per-field stuff

* use linear gradient for triangle

* update e2e to reflect current behavior, that clicking caret multiple times doesn't toggle pinning

* clean up event handlers a bit

* restore test for toggle click

* alright, re-remove the toggle case

* cursor pointer

* remove optional root from Popover for now

* remove this ridiculous autogenerated file

* update some of the text

* kill the cellRefMatrix

* remove unused import

* extract a util for the predicateByName part

* skip the intermediary step for getCellColors
2025-08-18 10:11:43 -04:00
Paul Marbach a5ceac4474
TableNG: Markdown cell, plus auto row height (#107549)
Actionlint / Lint GitHub Actions files (push) Waiting to run Details
Backend Code Checks / Validate Backend Configs (push) Waiting to run Details
Backend Unit Tests / Detect whether code changed (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (1/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (2/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (3/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (4/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (5/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (6/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (7/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (8/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (1/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (2/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (3/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (4/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (5/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (6/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (7/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (8/8) (push) Blocked by required conditions Details
Backend Unit Tests / All backend unit tests complete (push) Blocked by required conditions Details
CodeQL checks / Analyze (actions) (push) Waiting to run Details
CodeQL checks / Analyze (go) (push) Waiting to run Details
CodeQL checks / Analyze (javascript) (push) Waiting to run Details
Lint Frontend / Detect whether code changed (push) Waiting to run Details
Lint Frontend / Lint (push) Blocked by required conditions Details
Lint Frontend / Typecheck (push) Blocked by required conditions Details
Lint Frontend / Betterer (push) Blocked by required conditions Details
Verify i18n / verify-i18n (push) Waiting to run Details
End-to-end tests / Detect whether code changed (push) Waiting to run Details
End-to-end tests / Build & Package Grafana (push) Blocked by required conditions Details
End-to-end tests / Build E2E test runner (push) Blocked by required conditions Details
End-to-end tests / push-docker-image (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (--flags="--env dashboardScene=false", e2e/old-arch/dashboards-suite, dashboards-suite (old arch)) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (--flags="--env dashboardScene=false", e2e/old-arch/panels-suite, panels-suite (old arch)) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (--flags="--env dashboardScene=false", e2e/old-arch/smoke-tests-suite, smoke-tests-suite (old arch)) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (--flags="--env dashboardScene=false", e2e/old-arch/various-suite, various-suite (old arch)) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (e2e/dashboards-suite, dashboards-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (e2e/various-suite, various-suite) (push) Blocked by required conditions Details
End-to-end tests / Verify Storybook (Playwright) (push) Blocked by required conditions Details
End-to-end tests / Playwright E2E tests (${{ matrix.shard }}/${{ matrix.shardTotal }}) (1, 8) (push) Blocked by required conditions Details
End-to-end tests / Playwright E2E tests (${{ matrix.shard }}/${{ matrix.shardTotal }}) (2, 8) (push) Blocked by required conditions Details
End-to-end tests / Playwright E2E tests (${{ matrix.shard }}/${{ matrix.shardTotal }}) (3, 8) (push) Blocked by required conditions Details
End-to-end tests / Playwright E2E tests (${{ matrix.shard }}/${{ matrix.shardTotal }}) (4, 8) (push) Blocked by required conditions Details
End-to-end tests / Playwright E2E tests (${{ matrix.shard }}/${{ matrix.shardTotal }}) (5, 8) (push) Blocked by required conditions Details
End-to-end tests / Playwright E2E tests (${{ matrix.shard }}/${{ matrix.shardTotal }}) (6, 8) (push) Blocked by required conditions Details
End-to-end tests / Playwright E2E tests (${{ matrix.shard }}/${{ matrix.shardTotal }}) (7, 8) (push) Blocked by required conditions Details
End-to-end tests / Playwright E2E tests (${{ matrix.shard }}/${{ matrix.shardTotal }}) (8, 8) (push) Blocked by required conditions Details
End-to-end tests / All Playwright tests complete (push) Blocked by required conditions Details
End-to-end tests / A11y test (push) Blocked by required conditions Details
End-to-end tests / All E2E tests complete (push) Blocked by required conditions Details
Frontend tests / Detect whether code changed (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (1) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (2) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (3) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (4) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (5) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (6) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (7) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (8) (push) Blocked by required conditions Details
Frontend tests / Decoupled plugin tests (push) Blocked by required conditions Details
Frontend tests / Packages unit tests (push) Blocked by required conditions Details
Frontend tests / All frontend unit tests complete (push) Blocked by required conditions Details
Integration Tests / Sqlite (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Integration Tests / All backend integration tests complete (push) Blocked by required conditions Details
Reject GitHub secrets / reject-gh-secrets (push) Waiting to run Details
Run dashboard schema v2 e2e / dashboard-schema-v2-e2e (push) Waiting to run Details
Shellcheck / Shellcheck scripts (push) Waiting to run Details
Run Storybook a11y tests / Detect whether code changed (push) Waiting to run Details
Run Storybook a11y tests / Run Storybook a11y tests (push) Blocked by required conditions Details
Swagger generated code / Verify committed API specs match (push) Waiting to run Details
Dispatch sync to mirror / dispatch-job (push) Waiting to run Details
golangci-lint / lint-go (push) Has been cancelled Details
Crowdin Upload Action / upload-sources-to-crowdin (push) Has been cancelled Details
Documentation / Build & Verify Docs (push) Has been cancelled Details
publish-kinds-next / main (push) Has been cancelled Details
publish-technical-documentation-next / sync (push) Has been cancelled Details
Trivy Scan / trivy-scan (push) Has been cancelled Details
* TableNG: Markdown cell, plus custom row height

* tab indentation in cue file

* fix i18n

* trying an auto height with the updated RDG

* get auto cellHeight working

* i18n updates

* hoor disable_sanitize_html flag in MarkdownCell

* update react-data-grid version to attempt to support page up and down

* removing custom height

* use the latest experimental RDG with paging up and down

* TableNG: Wrap text for DataLinks and Pills; groundwork for max wrap length

* disable editing max wrapped lines for now

* disable wrap text line limit e2e

* new i18n extract after commenting out input

* wip

* kill max wrapped lines for now

* more cleanup

* remove targeting classes added for max wrapped lines

* fix Pill test

* couple more style cleanups

* fix e2es given these updates

* add a couple tests

* wip: tests

* add tests

* bump up capital letters in lorem ipsum

* fix copy-pasta mistake

* whoops, mis-merged the selector

* use a local count instead of getCellLinks

* use react-data-grid on react-18 branch

* fix linting on test

* gdev dashboard and smoketest for Markdown table

* remove cellHeightCustom

* reorganize in light of recent and upcoming changes

* remove one more reference to cellHeightCustom

* put getDefaultRowHeight back into a util

* clean up test

* swap cell height back to a radio

* revert ImageCell change, we'll do it in the getStyles PR

* don't memo defaultRowHeight

* final couple of style cleanups

* different approach to managing the auto height part of this

* kill console.log

* update i18n

* reorganized once more

* i18n

* guard against rowHeight being auto for virtualization

* may as well memoize the defaultRowHeight

* get rid of the enableVirtualization initializer thing

* fixes from CI

* fix test

* fix test

* just omit third arg for that test

* remove nonsensical test case

* this file didn't get re-gen'd

* fixes from review

* row expander doesn't need height

* remove console.log

* fix e2e after we fixed pagination toggle bug
2025-08-01 19:56:12 -04:00
Paul Marbach 7e47968939
TableNG: Wrap text for DataLinks and Pills (#108645)
* TableNG: Wrap text for DataLinks and Pills; groundwork for max wrap length

* disable editing max wrapped lines for now

* disable wrap text line limit e2e

* new i18n extract after commenting out input

* wip

* kill max wrapped lines for now

* more cleanup

* remove targeting classes added for max wrapped lines

* fix Pill test

* couple more style cleanups

* fix e2es given these updates

* add a couple tests

* wip: tests

* add tests

* bump up capital letters in lorem ipsum

* fix copy-pasta mistake

* use a local count instead of getCellLinks

* fix linting on test
2025-08-01 12:27:53 -04:00
Paul Marbach 4b9e03e7c0
TableNG: Simplify row height calculation and make more extensible (#108624)
* TableNG: Simplify row height calculation and make more extensible

* add a cache for the results of rowHeight when it's a function

* JSDoc comment for util

* from the other branch, copy the related code and tests

* rework the line counters a bit, limit line counting to string fields

* add test for string case for buildRowLineCounters

* add the concept of estimates vs. counts

* add a comment

* ceil, not floor

* try to be as terse as possible

* test for estimates

* comment the type

* more comment in test

* swap

* fix #108804

* convert em letter spacing to px for avgCharWidth calculation

* tweak whee em-to-px math happens, and force count to occur on every row when wrap is on to avoid short row issues

* update test

* update to clamp single-line estimation using a hardcoded value (0.85)

* add assertion for not calling counter in that case

* uwrap 0.1.2

* fix betterer issues

* fix typography ctx extra import

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2025-07-28 21:03:55 +00:00
Galen Kistler 01f863c47f
TableNG: Take nanos into account for column sorting (#108614)
* feat(ngTable): support nanos

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2025-07-25 21:43:36 +00:00
Paul Marbach 26d26f67d4
TableNG: Integrate hover and selection, DataLinkCell cleanup (#108353)
* Table: Style cleanups (minus DataLinkCell word wrap)

* kill JSONCell in favor of a custom display method and style overrides at TableNG

* remove unused type for JSONCellProps

* add increased specificity to CSS selector

* remove inherit and rely on undefined

* fix tests

* shrink and optimize DataLinkCell

* maybe

* format files

* better

* classname

* add Pills and DataLink cells to kitchen sink

* add comment about align + justify, simplify datalinks targeting

* simplify?

* poke

* tweak

* revert

* fix one more z-index conflict

* clean up alignment tests

* a couple more tests

* make TableNG e2e tests more resilient to changes to the gdev dashboard

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2025-07-23 19:39:25 +00:00
Leon Sorokin e42c45c30f
TableNG: Avoid render-time emotion calls for AutoCell (and colored cells) (#108048)
Co-authored-by: Paul Marbach <paul.marbach@grafana.com>
2025-07-15 14:42:06 -05:00
Paul Marbach dd6a231aad
TableNG: Add option to wrap header text (#107338)
* TableNG: wrapped header text option

* reorganize variable names and code for easier reuse

* refine height math

* move empty string check to after null check

* add tests for useHeaderHeight

* maybe a bit faster

* cleanup to avoid creating fns and objects all the time, some tests

* fix unit test

* cell was using panel height

* add borders between header cells to make resizing more obvious

* fix tests

* changes from mob review

* jk

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2025-07-03 14:21:58 -05:00
Leon Sorokin 99782ae406
TableNG: Refactor to better take advantage of react-data-grid (#103755) 2025-06-30 07:18:23 -05:00
Hugo Häggmark a07f63fbef
i18n: use @grafana/i18n within @grafana/ui (#106691) 2025-06-16 06:04:28 +02:00
Tom Ratcliffe e2cb3e74f3
Chore: Apply testing-library rules to grafana-ui package tests (#105140)
* Apply testing-library rules to grafana-ui package tests

* Apply auto fixes

* Fix eslint test issues in grafana-ui package

* Fix prettier issues

* Address review feedback
2025-05-09 17:45:33 +01:00
Alex Spencer 680874e0d5
TableNG: Fix sub table styles + expand/collapse (#104015)
* fix: sub table expand/collapse + styles

* chore: pass in datagrid styles differently

* chore: fix test lint

* chore: fix cell hover flicker

* chore: fix sub table height issue

* chore: fix background color hover issue

* chore: revert hover changes - separate PR incoming

* chore: fix sub table width + alignment

---------

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
2025-04-22 08:15:48 -06:00
Alex Spencer a66db96fd9
TableNG: Text wrap enhancements (#102954)
* feat: text wrap table g12

* chore: remove stale comment

* tests: skipping - can't figure out how to test right now

* move text wrap stuff to table new

* chore: make table stuff untouched. only in table new

* wrap text stuff only in table-new

* unbreak RT wrapping

* skip tests for now

* cleanup

* fix bad merge

* revert some stuffs

* maybe

* tweaks

* uwrap 0.1.1

* fix: cell width fixes for overrides

* chore: fix column width

* fix: update hover logic

* fix: utils.test.ts

* chore: mock uWrap and remove tests for now

* chore: adjust width

* chore: clean

* chore: width passed to uwrap account for border

* chore: width changes

* adjust

* no descr

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2025-04-08 09:34:41 -06:00
Ashley Harrison 641031cfaf
Chore: Type fixes (#103340)
* tidy tidy

* more fixes

* some TableNG fixes

* another TableNG test fix

* some more fixes

* betterer...
2025-04-07 11:29:30 +01:00
Alex Spencer d6ec8ab8b1
TableNG [Bug Bash]: Cell inspect and filter on the field level (#103004)
* fix: cell inspect + filter at the field level, not defaults

* chore: defensive against missing custom config

* chore: reconfigure tests

* hide inspect block if nothing to show

---------

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>
2025-04-03 16:28:19 +02:00
Ihor Yeromin a6edd1765d
TableNG: Filter ui/ux improvements (#102985)
* feat(table-ng): filter ui/ux improvements
2025-03-27 18:27:58 +01:00
Drew Slobodnjak 03d6d8f854
Table: Move library to react-data-grid (#102482)
* Changes galore

* Freedom 🗽

* Add feature flag

* Latest changes

* Basic auto cell type

* Partially working bar-gauge

* Brokenish but whatevs

* Include the toggle doc

* TableNG: Context menu (#94094)

* feat(table-ng): context menu init commit

* betterer

* feat(table-ng): re-use contextmenu component

* fix(table-ng): close context menu issue

* TableNG: Sorting columns (#94200)

feat(table-ng): sorting column

* fix feature toggle conflict

* TableNG: Sorting with custom table header (#95351)

* TableNG: Header Toggle (#95310)

* TableNG: Multi-column sorting (#95395)

feat(table-ng): multi-sorting

* TableNG: Column width options (#95426)

* feat(table-ng): column width

* mouse handle drag event

* move resizing task

* TableNG: Fix icon sorting direction (#95653)

fix(table-ng): sorting icon direction

* TableNG: Show table footer (#95313)

* TableNG: Show table footer

* Revert betterer

* Update betterer

* Incorporate reducer calculations into footer

* Update imports in FooterRow

* Use getFooterValue for summary cell render

* TableNG: Min column width (#95657)

* feat(table-ng): min column width

* feat(table-ng): set a min width constant

* TableNG: Column alignment (#95679)

* feat(table-ng): column alignment

* cleaning

* feat(table-ng): header cell alignment

* optimizations

* feat(table-ng): footer cell alignment

* calc counter

* TableNG: use compiled fn for columns -> records conversion (#95914)

* use compiled fn for columns -> records conversion

* TableNG: Move key rev and fix width overrides (#95921)

* meh

* add index to records

---------

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>

* TableNG: Sparkline Cell Parity (#95690)

* sparkline value

* todo

* Remove unsued shallowField

* Pass justifyContent to sparkline

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: BarGauge cell updates (#95521)

* fix bargauge cell

* merge and fix props

* cleanup imports

* TableNG: Text wrapping (#96041)

* feat(table-ng): fix long text cell width

* feat(table-ng): fix long text cell width 2

* comment out column rowHeight

* fix long text column width

* fix types

* fix types

* naming

* Check current header cell ref is defined for key

* cleaning

* make table re-render when data changed

* eslint

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Text overflow (#96641)

* feat(table-ng): text overflow

* cleaning

* TableNG: Fix footer for count (#96802)

* TableNG: Table column filter (#96767)

* feat(table-ng): add filter form

---------

Co-authored-by: drew08t <drew08@gmail.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* TableNG: On column resize trigger (#97004)

chore(table-ng): trigger on resize on text wrap only

* TableNG: Improve sort performance (#97767)

* TableNG: Improve sort performance

* clean a bit

* a bit more

* Remove const that was breaking sort

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* TableNG: Fix sorting (#98141)

fix(table-ng): sorting

* TableNG: fix multi sorting (#98668)

fix(table-ng): multi sorting

* TableNG: Column re-size handler (#98901)

* feat(table-ng): column re-size handler

* TableNG: Fix footer calcs with no reducer (#99347)

* TableNG: Update renderHeaderCell with filter dep (#99483)

* TableNG: Updated styles for demo (#99530)

* style proposal: table ng

* chore: revert gauge cell custom stuff

* TableNG: Cross-filter (#99459)

* feat(table-ng): cross-filter

* fix filter update issue

* fix filter reset issue

* Fix spacebar for filter input

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Filter perfomance optimization (#99620)

fix(table-ng): filter performance optimization

* TableNG: Refine styling closer to original table (#99625)

* TableNG: Support groupToNestedTableTransform (#97134)

* TableNG: Support groupToNestedTableTransform

* Fix merge issues

* Force refresh for now

* Remove log

* Fix some conflicts

* Fix more conflicts

* Help avoid clash with compiled frameToRecords keys

* Make subtable height unconstrained

* Support show field names in nested tables toggle

* TableNG: Fix footer + some other misc updates (#99846)

fix: footer fixes huzzah

* TableNG: Styling - Update styling for cells (#99851)

* fix(table-ng): bargauge inner width issue

* TableNG: Move header cell component (#99844)

* fix(table-ng): move header cell into separate file

* Fix sub table

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Auto cell feature parity (#100095)

* feat(table-ng): auto cell feature parity

* TableNG: JSON cell implementation + hover fixes (#100152)

* feat: tableNG json cell + auto fixes

* chore: add comment

* add justify content to json cell

---------

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>

* TableNG: Fix cell hover issue (#100207)

* fix(table-ng): cell hover issue

* better commenting

* TableNG: Text color cell (#100120)

feat(table-ng): text color cell feature parity

* TableNG: Image cell implementation (#100132)

* feat: tableNG image cell

* fix: incorporate justify-content correctly

* chore: pass down cell options from fieldConfig

---------

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>

* TableNG: Cell height performance improvement (#100544)

* chore: perf improvement

* chore: minor fix

* Update packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* chore: fix betterer

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* TableNG: Add pagination (#100165)

* TableNG: Add pagination

* TableNG: Get collapsed icon state correct + update `rowHeight` (#100556)

* fix: get collapsed icon state correct + update condition for calculating row height

* chore: some cleanup!

* chore: naming to avoid confusion with local state name

* TableNG: Add support for `DataLinksCell` (#100459)

* TableNG: Improve sub table styling (#100772)

* Move files temporarily to fix conflicts

* Fix feature flag conflicts

* Move files back to cell dir

* TableNG: Update inner height of bar gauge cell (#100996)

* fix: change inner height of bar gauge cell

* chore: move function to utils, cleanup

* Remove testing line

* TableNG: Add bottom border to column headers + fix footer styling (#101016)

* feat: add bottom border to column headers for table parity

* feat: summary row style fix

* chore: remove redundant style

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Add support for `ActionsCell` (#101024)

* TableNG: Cell hover styles + header resize handler indicator (#100770)

* fix: tableNG styles

* chore: clean up comments

* chore: remove column header stuffz for now

* fix: refactor to transform/translate + resize handler hover styling

* chore: re-think approach - change a lot of things

* chore: most recent iteration

* chore: wait i like this better

* chore: hoist into colors function + clean it up!

* moar better

* chore: define constants for clarity

* chore: calculate rbga to rgb values given background color

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Fix scoll hover jumpy behavior (#101085)

* fix(table-ng): hover scroll jumping

* Account for panel padding during pagination

---------

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Fix imports (#101059)

* fix(table-ng): clean imports

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>

* TableNG: Sorted rows dependent upon filtered rows (#100985)

TableNG: Improve multi-sort performance

* TableNG: Fix sparkline width (#101164)

fix(table-ng): sparkline width

* TableNG: Type TableNG (#101257)

* feat: type tableNG

* chore: push betterer

* chore: fix linter + why can't I have inline if statements... GRR!

* fix: linter - props name got changed at some point...

* feedback: data links prop consistency + json cell robustness

* chore: remove unused rowIndex prop

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Add support for datalinks (#100769)

Co-authored-by: drew08t <drew08@gmail.com>

* Chore: Remove unused import (#102064)

remove unused import

* Update betterer

* BarGauge: Remove z-index (#102220)

fix(bargauge): remove z-index

* TableNG: Refactor + testing (#102045)

* feat: type tableNG

* chore: push betterer

* chore: fix linter + why can't I have inline if statements... GRR!

* fix: linter - props name got changed at some point...

* feedback: data links prop consistency + json cell robustness

* feat: refactor + tests

* chore: fix import lint errors

* betterer

* chore: fix image cell

* chore: revert width function

* add test

* betterer

* chore: fix sorting + add tests

* chore: pr feedback

---------

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>
Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Fix table suggestion (#102497)

fix: defensively guard against missing cellOptions

* TableNG: Footer fields calc fix (#102487)

* fix: respect footer fields calc selection

* chore: add test

* TableNG: Image cell hover fix (#102489)

fix: image cell hover

* TableNG: Persist scrollbars during re render (#102559)

* TableNG: Persist scrollbars during re render

* Update improved betterer

* TableNG: Fix column width override (#102474)

* fix(table): column width override

* TableNG: Add support for crosshair share (#102410)

* TableNG: Add support for crosshair share

* Add tests

* TableNG: Fix table ng tests (#102645)

fix: cellType causing tests to fail

* Remove empty file

* TableNG: Update util tests (#102646)

* TableNG: Add column type icon (#102686)

* chore(table-ng): add column type icon

* chore(table-ng): clean styling

* Use core internationalization outside grafana ui

* Import popover directly

* Add count to grafana-ui locales

* TableNG: Change feature flag to tableNextGen (#102814)

Change feature flag to tableNextGen

* TableNG: Add row colors (#102706)

* chore(table-ng): add row colors

* clean up

* fix params

* fix(table-ng): cell color background indexing

---------

Co-authored-by: Kyle Cunningham <kyle@codeincarnate.com>
Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>
Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
Co-authored-by: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Co-authored-by: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
2025-03-25 20:57:57 -07:00