Strato Arsenal

Import Paths

Everything imports from @dynatrace/strato-components sub-paths:

import { Page, Flex, TitleBar } from "@dynatrace/strato-components/layouts";
import { Heading, Text } from "@dynatrace/strato-components/typography";
import { Button } from "@dynatrace/strato-components/buttons";
import { DataTable, convertToColumns } from "@dynatrace/strato-components/tables";
import { TimeseriesChart, convertToTimeseries } from "@dynatrace/strato-components/charts";

Component Quick Reference

Category	Components	Import Path
Layout	Page, Flex, TitleBar, AppHeader	/layouts
Typography	Heading, Text, Strong	/typography
Data	DataTable, convertToColumns	/tables
Charts	TimeseriesChart, BarChart	/charts
Actions	Button, ToggleButton	/buttons
Forms	TextInput, Select, FormField	/forms

DataTable

Feed DQL results directly into a table:

const { data } = useDql({ query: `fetch dt.entity.host | fields entity.name, cpuCores` });

<DataTable data={data?.records} columns={convertToColumns(data)} />

Row Actions

<DataTable data={data?.records} columns={convertToColumns(data)}>
  <DataTable.RowActions>
    {(row) => <Button onClick={() => navigate(`/detail/${row.id}`)}>View</Button>}
  </DataTable.RowActions>
</DataTable>

Layout Patterns

Pattern	Code	Use For
Vertical stack	Flex flexDirection="column" gap={16}	Page sections, form fields
Horizontal row	Flex flexDirection="row" gap={8}	Button groups, inline items
Fill space	Flex style={{ flex: 1 }}	Expanding content areas
Centered	Flex justifyContent="center" alignItems="center"	Loading states, empty states

Strato Design Tokens

var(--dt-colors-background-surface)    /* card background */
var(--dt-colors-text-primary)          /* main text */
var(--dt-colors-charts-categorical-*)  /* chart colors */

What's Next

Module 6 — Charts: TimeseriesChart, BarChart, and visualizing metrics over time.