topic Re: Dynatrace SDK - DataTable :: CSS row hover in Developer Q&A Forum

Dynatrace SDK - DataTable :: CSS row hover

chris_cho — Wed, 08 Jan 2025 15:13:19 GMT

How can I implement for a DataTable to highlight the hovered row?
Not sure how to set the [className] property at the row level.

Re: Dynatrace SDK - DataTable :: CSS row hover

MikeleH — Thu, 09 Jan 2025 07:29:09 GMT

Hey @chris_cho - the feature you're looking for is natively supported and is called "interactiveRows" (so no css needed 🙂 ). I see that it's missing from the docs, so will make sure that it's added.

<DataTableV2 data={data} columns={columns} interactiveRows />;

Re: Dynatrace SDK - DataTable :: CSS row hover

chris_cho — Thu, 09 Jan 2025 16:18:34 GMT

Hi @MikeleH, thank you for the quick response.
It looks that this property is available to DataTableV2 but not to DataTable control.
I will try to changing the implementation by using DataTableV2 but it doesn't look like a straightforward transition considering that I also used other properties of DataTable as columnVisibility, onColumnVisibilityChange, rowThresholds, also distinct control that shows conditionally the data is loading in the DataTable.

Re: Dynatrace SDK - DataTable :: CSS row hover

MikeleH — Fri, 10 Jan 2025 07:03:53 GMT

Hey @chris_cho - the `DataTableV2` not only has feature parity with the `DataTable` but also has a lot more features. I would suggest migrating from the `DataTable` to the `DataTableV2`as we will be deprecating the `DataTable`.

In terms of migration, we have created a migration guide here: https://developer.dynatrace.com/design/components-preview/tables/DataTableV2/migrationGuide/

Re: Dynatrace SDK - DataTable :: CSS row hover

chris_cho — Fri, 10 Jan 2025 22:20:11 GMT

Hello @MikeleH ,

I have tried to implement the current logic by by manually changing the DataTable with DataTableV2 component.
Unfortunately, following the examples given in Dynatrace Developer documentation, it doesn't work for me.
First, I found the DataTableV2 component in "@dynatrace/strato-components-preview/tables/DataTableV2/DataTableV2" instead of "@dynatrace/strato-components-preview/tables".
But, in "@dynatrace/strato-components-preview/tables" I found the component _DataTableV2 (prefixed with underscore)
DataTableV2 component doesn't recognize any of underneath elements such as Toolbar, VisibilitySettings, DownloadData.

Also, I followed the instructions provided in the migration guide:

installed jscodeshift
npm install -g jscodeshift
downloaded locally the file provided in the documentation - migrate-datatable-datatablev2.js
executed the migration script over an existing component file that includes the DataTable component.
npx jscodeshift --parser tsx -t <path-to-downloaded-file>\migrate-datatable-datatablev2.js <path-to-target-component-file>.tsx
still no success 🤔

I am not quite sure what I am missing. Please advise.

Re: Dynatrace SDK - DataTable :: CSS row hover

chris_cho — Sat, 11 Jan 2025 07:43:11 GMT

Hello @MikeleH,

Checking again the app templates from Dynatrace GitHub, I updated the package.json versions for packages @dynatrace/strato-components and @dynatrace/strato-components-preview

Afterwards, I executed npx install and npx dt-app build
All good! Now, I can use the DataTableV2 component as expected and indeed I can see property interactiveRows.

Thanks

Re: Dynatrace SDK - DataTable :: CSS row hover

chris_cho — Sat, 11 Jan 2025 19:29:20 GMT

Hello @MikeleH,

After I setup the SDK to work with DataTableV2 component, and adjusted accordingly the code, I noticed that the control doesn't work as expected, especially as looks-and-fills.
My component page has a main DataTable component not page based but scroll controlled, based on the DataTable height property that is missing for the DataTableV2. The second DataTable is displayed based on a row action from the main DataTable. The data in these two tables could be as few rows up to few hundred rows. The idea using height property is to control the height of the DataTable controls, at least the main on. With vertical scroll is more convenient to find a record than having the DataTable page based.

On the other hand the new property interactiveRows, for DataTableV2 doesn't work as expected. It doesn't highlight the hovered row.

Re: Dynatrace SDK - DataTable :: CSS row hover

imsingh — Mon, 13 Jan 2025 11:03:01 GMT

@chris_cho Hi there

Can you provide a codesandbox or a code snippet so that we can replicate what you're doing?

This will help us in providing you better solution for your problem.

Thanks

Indermohan Singh

Re: Dynatrace SDK - DataTable :: CSS row hover

chris_cho — Mon, 13 Jan 2025 14:42:07 GMT

Hi @imsingh,

For now, we are fine with what I accomplished. The code of component page is quite complex to share.
Here is just a screenshot with the code for DataTableV2, having the property [height] no longer available.

However, I will check later again the coming releases which may include the DataTableV2 and SelectV2.
Quite same it's for SelectV2 component. I couldn't set the height of the dropdown list, to scroll the elements based on vertical scrollbar. The dropdown list extends the page vertically as many select options as they are.

Thank you

Re: Dynatrace SDK - DataTable :: CSS row hover

imsingh — Mon, 13 Jan 2025 14:48:29 GMT

Hi @chris_cho

You can still change the height of the DataTableV2. You just have to wrap it around a component that accepts height.

In your case, easiest would be to do something like this:

<Flex height={200}><DataTableV2></DataTableV2></Flex>

I hope that helps.

Re: Dynatrace SDK - DataTable :: CSS row hover

chris_cho — Mon, 13 Jan 2025 15:09:13 GMT

Hello @imsingh,
This is not the same as having the initial property height available for DataTableV2

The header of the table should remain static, when it scrolls up and down, as it does for initial DataTable control, as I specified earlier in this chat.

Anyway, for now, I will keep using DataTable, and perhaps in the next releases the DataTableV2 will have some enhancements to include all features from DataTable, and also will be included in the documentation.

Thank you.

Re: Dynatrace SDK - DataTable :: CSS row hover

imsingh — Mon, 13 Jan 2025 15:23:49 GMT

Hi @chris_cho
Can you give it a try? I've tried it already and it does exactly what you want. It makes the header sticky and provide a scrollbar. You can check the screenshot attached.

Thanks

Re: Dynatrace SDK - DataTable :: CSS row hover

chris_cho — Mon, 13 Jan 2025 16:43:59 GMT

Than you @imsingh