Dynatrace SDK - DataTable :: CSS row hover

[chris_cho]

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

[MikeleH]

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 />;

[chris_cho]

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.

[MikeleH]

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/

[chris_cho]

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.

[chris_cho · Accepted solution]

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

[chris_cho]

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.

[imsingh]

@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

[chris_cho]

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

[imsingh · Accepted solution]

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.

[chris_cho]

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.

[imsingh · Accepted solution]

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

[chris_cho]

Than you @imsingh