Skip to main content

Explore Data

Generate this Task Flow​

cd src/pages
npx degit strudel-science/strudel-kit/src/pages/explore-data my-explore-data

File Structure​

explore-data
├── -components
│  ├── DataView.tsx # Data grid component
│  ├── DataViewHeader.tsx # Header above data table
│  ├── FiltersPanel.tsx # Left side panel of filters
│  └── PreviewPanel.tsx # Panel displayable on row-click
├── -tests
│  └── explore-data.cy.ts # End-to-end test for this Task Flow
├── $id.tsx # Detail page for a single row
└── index.tsx # Data explorer page

Pages and Layouts​

index.tsx​

First page of the Explore Data Task Flow. Displays a data table, filters panel, and a data preview panel.

Customizable items​

  • Filter definitions
  • DataView.tsx
    • Data source
    • Data ID field
    • Data table columns
    • Query mode (client or server)
  • PreviewPanel.tsx
    • Preview content

$id.tsx​

Data detail page of the Explore Data Task Flow. When a user drills into a record in the data table, the detail page shows more data about the selected item.

Customizable items​

  • Detail page data source
  • Detail page data unique ID field
  • Detail page query mode (client or server)
  • Page header field
  • Breadcrumb title text
  • Detail page content