Closed buger closed 1 year ago
Hello @buger
The internal table does not have a search, but we have an external component that has a search capability, see this example:
datasets:
- uuid: gists
url: https://api.github.com/gists
cacheEnabled: true
expression: >-
$map($, function($v){
[$v.created_at,$v.description,$v.files ~> $keys ~> $count]
})
columns:
- id: Created
- id: Description
- id: Total Files
pages:
- components:
- displayer:
component: table
lookup:
uuid: gists
Here's what it looks like:
You can edit it here: https://start.kubesmarts.org/#/import?url=https://raw.githubusercontent.com/jesuino/dashbuilder-yaml-samples/main/basic/Table.dash.yaml
We plan to make this default sometime in future!
Amazing, thank you! But how I can add this external component to my local installation? It seems to be using some new syntax? In your example you have:
- components:
- displayer:
component: table
external:
height: 500px
And I use what currently in the docs:
components:
- settings:
filter:
enabled: true
selfapply: true
notification: true
listening: true
table:
sort:
enabled: true
columnId: deployments_count
order: DESCENDING
@jesuino
Hello @buger
The latest dashbuilder version include this component. It is external, but we provide it in the Dashbuilder bundle. Check the folder dashbuilder/components
to see all components we provide:
[wsiqueir@localhost dashbuilder-client]$ ls dashbuilder/component/
echarts map svg-heatmap table timeseries uniforms victory-charts
There's a mention to the table component on documentation:
https://www.dashbuilder.org/docs/#_external_components_2
displayer
is the same as settings
we will soon update the docs with this information. I found an interesting issue with external components, and why it was not loading for me, but hard to say why it happens.
Before I was uisng https://www.npmjs.com/package/serve to run static server, and for some reason it was going to some kind of redirect loop with iframe pointing to external component. Replicating very easy just run serve --cors
. When I replaced it with http-server
which you recommend in npm docs it started loading table component.
However how I hit another issues. Data for some reson is not loading there 🤔
I just copy pasted your example, even with gist data source, like this, it shows 0 records 🤔
- columns:
- span: 12
components:
- settings:
component: table
lookup:
uuid: gists
If I make it standard table, data gets shown as expected:
- columns:
- span: 12
components:
- settings:
lookup:
uuid: gists
table:
I also tried running your yaml definitin as it is, and again it shows 0 records.
How it performs transferring data to iframe, using some kind of postMessage
?
I have some 404 errors in http server logs, can it be related somehow?
2023-05-18T07:11:48.282Z] "GET /tyk.dash.yaml" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15"
[2023-05-18T07:11:48.753Z] "GET /sw.js?params=%7B%22offlineMode%22%3Afalse%2C%22debug%22%3Afalse%7D" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15"
[2023-05-18T07:11:48.753Z] "GET /sw.js?params=%7B%22offlineMode%22%3Afalse%2C%22debug%22%3Afalse%7D" Error (404): "Not found"
Thanks!
I have isolated this issue to Safari. Google Chrome displays table with data as expected 🤔 Any ideas on how to overcome this issue? I guess some service worker API differences.
And one more question, I see that this component supports being filtered by others, but not yet can filter others. E.g. I can't click on some column, and make it filter other charts?
Can you point me to the source code of this table component, maybe I can try to add this functionality by myself? Any hints?
Thanks!
Hello @buger
Thanks for the feedback.
We have a known issue with Safari and External Components:
https://issues.redhat.com/browse/KOGITO-7870
Fix is pending...
For the filter capability, it is possible a component to filter other. The external component Table also supports filter but there's a specific parameter that we need to set selectable
, see:
datasets:
- uuid: products
content: >-
[
["Computers", "Scanner", 5, 3],
["Computers", "Printer", 7, 4],
["Computers", "Laptop", 3, 2],
["Electronics", "Camera", 10, 7],
["Electronics", "Headphones", 5, 9]
]
columns:
- id: Section
type: LABEL
- id: Product
type: LABEL
- id: Quantity
type: NUMBER
- id: Quantity2
type: NUMBER
pages:
- components:
- settings:
component: table
filter:
notification: true
table:
selectable: true
lookup:
uuid: products
- settings:
type: BARCHART
filter:
listening: true
lookup:
uuid: products
group:
- columnGroup:
source: Product
functions:
- source: Product
- source: Quantity
function: SUM
- source: Quantity2
function: SUM
Check it here:
Works great, thanks! If I can help somehow fixing this bug, let me know.
Feel free to close this ticket
Hello!
Will be great to add some dynamic search capability to the tables elements, or maybe enchance dropdown element to have search activity. When there are a lot of elements in table, like hundreds, it is getting very hard to find the row you need.
Thanks!