Skip to main content

Rowspan examples

Use [r2], [r3], etc. to make cells span multiple rows. Use _ as a placeholder in following rows.

Simple rowspan

Products with categories
CategoryProductPrice
ElectronicsLaptop$999
Mouse$29
BooksFiction Novel$15
Technical Manual$45

MDX source

<ListTable headerRows={1} caption="Products with categories">
- - Category
- Product
- Price
- - [r2] Electronics
- Laptop
- $999
- - _
- Mouse
- $29
- - [r2] Books
- Fiction Novel
- $15
- - _
- Technical Manual
- $45
</ListTable>

Key Points:

  • [r2] in the "Electronics" cell makes it span two rows
  • The second row uses _ as a placeholder for the Category column
  • The cell content is "Electronics" (without the [r2] prefix in the output)

Multiple rowspans

Multiple columns can have rowspans independently:

Team schedule
TeamMemberTaskHours
FrontendAliceUI Components8
Bob6
CarolTesting4
BackendDaveAPI Development10
EveDatabase8

MDX source

<ListTable headerRows={1} caption="Team schedule">
- - Team
- Member
- Task
- Hours
- - [r3] Frontend
- Alice
- [r2] UI Components
- 8
- - _
- Bob
- _
- 6
- - _
- Carol
- Testing
- 4
- - [r2] Backend
- Dave
- API Development
- 10
- - _
- Eve
- Database
- 8
</ListTable>

Large rowspan

Project phases
PhaseWeekDeliverable
PlanningWeek 1Requirements
Week 2Design Mockups
Week 3Architecture
Week 4Project Plan
ImplementationWeek 5-12Working Product

MDX source

<ListTable headerRows={1} caption="Project phases">
- - Phase
- Week
- Deliverable
- - [r4] Planning
- Week 1
- Requirements
- - _
- Week 2
- Design Mockups
- - _
- Week 3
- Architecture
- - _
- Week 4
- Project Plan
- - Implementation
- Week 5-12
- Working Product
</ListTable>