chore: add grid tooltip generator

vaadin · Dec 18, 2023 · d0ee759 · d0ee759
1 parent 877ec85
commit d0ee759
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/dev/pages/Grid.tsx b/dev/pages/Grid.tsx
@@ -1,7 +1,7 @@
 import { Grid, type GridDataProvider } from '../../src/Grid.js';
 import { GridSelectionColumn } from '../../src/GridSelectionColumn.js';
 import { GridTreeColumn } from '../../src/GridTreeColumn.js';
-import { GridColumn } from '../../src/GridColumn.js';
+import { GridColumn, GridColumnElement } from '../../src/GridColumn.js';
 import { Tooltip } from '../../src/Tooltip.js';
 
 type Item = {
@@ -24,6 +24,12 @@ const dataProvider: GridDataProvider<Item> = ({ parentItem, page, pageSize }, cb
   cb(pageItems, levelSize);
 };
 
+const tooltipGenerator = ({ column, item }: Record<string, unknown>) => {
+  const columnPath = (column as GridColumnElement)?.path;
+  const itemName = (item as Item)?.name;
+  return columnPath && itemName ? `Tooltip ${columnPath} ${itemName}` : '';
+};
+
 export default function () {
   return (
     <Grid itemIdPath="name" dataProvider={dataProvider}>
@@ -33,7 +39,7 @@ export default function () {
       <GridColumn path="name" width="200px" />
       <GridColumn path="name" width="200px" />
 
-      <Tooltip slot="tooltip" hoverDelay={500} hideDelay={500} />
+      <Tooltip slot="tooltip" hoverDelay={500} hideDelay={500} generator={tooltipGenerator} />
     </Grid>
   );
 }