Skip to main content

Compare Data

Generate this Task Flow​

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

File Structure​

compare-data
├── -context
│  ├── ContextProvider.tsx # State management for this Task Flow
│  └── actions.ts # Action functions that control the state
├── -tests
│  └── compare-data.cy.ts # End-to-end test for this Task Flow
├── _layout
│  ├── compare.tsx # Compare data page
│  ├── index.tsx # Initial list view page
│  └── new.tsx # Adding a new item page
└── _layout.tsx # Layout wrapper for the pages

Pages and Layouts​

_layout.tsx​

Layout wrapper for the three Task Flow pages.

Customizable items​

  • Data source for the main data table
  • Data ID field for the main data table
  • Columns for the main data table

_layout/index.tsx​

First page of the Compare Data Task Flow. Displays a list of selectable records for a user to compare.

Customizable items​

  • List page title
  • List page description
  • Compare button
  • New button

_layout/compare.tsx​

Compare page of the Compare Data Task Flow. When a user selects records to compare and initiates a comparison, this page displays a specialized table for comparing the selected records.

Customizable items​

  • Compare page title
  • Compare page description
  • Back button
  • New button

_layout/new.tsx​

New record page of the Compare Data Task Flow. Displays a form for generating a new record in the data.

Customizable items​

  • New page title
  • New page description
  • Save button
  • Form elements