Filtering an application that is using data from useDQL

johnacreek — Wed, 27 Aug 2025 14:12:45 GMT

I am developing an app for a user, using useDQL and an DatatablesV2 control. I am trying to create filters on the DatatableV2 using filtering controls (FilterBar), but none of the examples use DQL as a source and I cannot get filtering to work. Does Dynatrace have an example app that filters a DatatableV2 using data from useDQL (UseDqlResult/ResultRecord) type?

Re: Filtering an application that is using data from useDQL

doesterr — Tue, 09 Sep 2025 09:48:52 GMT

Hey there,
You are right. None of the existing examples we have uses data from a DQL query as a base.

Here's a minimal example that does pretty much the same as https://developer.dynatrace.com/design/components-preview/filters/FilterBar/#render-filtered-data-in-a-table but uses data from a DQL query as a base.

It fetches logs via DQL, shows them in a DataTableV2, and allows simple filtering of the log level via a TextInput in a FilterBar.

import React from 'react'; import { Flex } from '@dynatrace/strato-components/layouts'; import { DataTableV2 } from '@dynatrace/strato-components-preview/tables'; import { useFilteredData } from '@dynatrace/strato-components-preview/tables'; import { FilterBar } from '@dynatrace/strato-components-preview/filters'; import { TextInput } from '@dynatrace/strato-components-preview/forms'; import { useDql } from '@dynatrace-sdk/react-hooks'; export const App = () => { const queryString = 'fetch logs | fields timestamp, loglevel, content | sort timestamp desc | limit 100'; const { data } = useDql({ query: queryString }); function filterFn(filters, entry) { const filterValue = filters.loglevel?.value ?? ''; const loglevelValue = typeof entry.loglevel === 'string' ? entry.loglevel : ''; return ( !filterValue || loglevelValue.toLowerCase().includes(filterValue.toLowerCase()) ); } const records = React.useMemo(() => data?.records ?? [], [data?.records]); const { onChange, filteredData } = useFilteredData(records, filterFn); return ( <Flex flexDirection="column" padding={32}> <FilterBar onFilterChange={onChange}> <FilterBar.Item name="loglevel" label="Log Level"> <TextInput /> </FilterBar.Item> </FilterBar> <DataTableV2 columns={[ { id: 'timestamp', header: 'Timestamp', accessor: 'timestamp' }, { id: 'loglevel', header: 'Log Level', accessor: 'loglevel' }, { id: 'content', header: 'Content', accessor: 'content', width: '2fr', }, ]} data={filteredData} fullWidth /> </Flex> ); };

I hope that helps!

topic Re: Filtering an application that is using data from useDQL in Developer Q&A Forum

Filtering an application that is using data from useDQL

Re: Filtering an application that is using data from useDQL