Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TablePanel: POC of custom cell rendering from plugins #64999

Closed
wants to merge 56 commits into from

Conversation

torkelo
Copy link
Member

@torkelo torkelo commented Mar 19, 2023

This is a POC of how we can allow plugins to do custom cell rendering.

Scenarios

  • Render a cell with some complex coloring/display logic that depend on some other cell or data
  • Render an image before the cell text value (and image based on some cell value / lookup)
  • Other custom cell renderings

Implementation problems

  • My first approach was just allowing a full custom CellComponent (IE similar to how DefaultCell, and BarGaugeCell are implemented) but this is really problematic as those cells require a lot of Table internals to get cell position and styles. Maybe the cellProps is not that bad but exposing TableStyles and buildCellContainerStyle fee. very fragile. So instead I explored a custom cell rendering that still uses DefaultCell to handle data links and the position and padding of the cell, this limits custom cell renderings to not be able to do some things that require changing the styles of the cell container. But I think this limitation could be fine.
  • Second problem is what the interface / props should be for the custom cell renderer in order not to expose to many internal table interfaces and types.

Screenshot from 2023-03-19 08-31-05

@torkelo torkelo changed the base branch from main to grafana-monitoring-app March 19, 2023 07:39
Comment on lines +728 to +731
export interface TableCustomCellOptions {
cellComponent: string;
type: TableCellDisplayMode.Custom;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how to type a react component in cue 🤣

@github-advanced-security
Copy link

You have successfully added a new CodeQL configuration .github/workflows/pr-codeql-analysis-javascript.yml:analyze. As part of the setup process, we have scanned this repository and found 29 existing alerts. Please check the repository Security tab to see all alerts.

Base automatically changed from grafana-monitoring-app to main March 20, 2023 10:15
export interface CustomCellRendererProps {
field: Field;
value: any;
// what else to pass in order to make it more agnostic to table internals?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

field & value maybe be enough. Can use a transformer to pass what's needed as a value

@domasx2
Copy link
Contributor

domasx2 commented Mar 29, 2023

nice, this will be very useful :)

@grafanabot
Copy link
Contributor

This pull request has been automatically marked as stale because it has not had activity in the last 30 days. It will be closed in 2 weeks if no further activity occurs. Please feel free to give a status update now, ping for review, or re-open when it's ready. Thank you for your contributions!

@grafanabot grafanabot added stale Issue with no recent activity and removed stale Issue with no recent activity labels Apr 29, 2023
@grafanabot
Copy link
Contributor

This pull request has been automatically marked as stale because it has not had activity in the last 30 days. It will be closed in 2 weeks if no further activity occurs. Please feel free to give a status update now, ping for review, or re-open when it's ready. Thank you for your contributions!

@grafanabot grafanabot added stale Issue with no recent activity and removed stale Issue with no recent activity labels May 30, 2023
@grafanabot
Copy link
Contributor

This pull request has been automatically marked as stale because it has not had activity in the last 30 days. It will be closed in 2 weeks if no further activity occurs. Please feel free to give a status update now, ping for review, or re-open when it's ready. Thank you for your contributions!

@grafanabot grafanabot added stale Issue with no recent activity and removed stale Issue with no recent activity labels Jul 1, 2023
@torkelo torkelo closed this Jul 6, 2023
@torkelo torkelo mentioned this pull request Feb 22, 2024
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants