Tier E3
RN-universal Table pilot
ScaffoldedStructural table composition. Eight slots mirror shadcn Table: root + Header/Body/Footer/Row/Head/Cell/Caption. Role attributes forwarded on web so the DOM presents as a real table; native flex layout keeps content readable.
Side-by-side: institutions
shadcn
| Code | Name | Students | Status |
|---|---|---|---|
| TPEMIS-FBC-01 | Fourah Bay College | 3,200 | Active |
| TPEMIS-SJSS-02 | St. Joseph's Secondary | 820 | Active |
| TPEMIS-MMTU-03 | Milton Margai Technical University | 1,540 | Onboarding |
| TPEMIS-NJMS-04 | Njala Model Secondary | 410 | Active |
| Total | 5,970 | ||
RN
Code
Name
Students
Status
TPEMIS-FBC-01
Fourah Bay College
3,200
Active
TPEMIS-SJSS-02
St. Joseph's Secondary
820
Active
TPEMIS-MMTU-03
Milton Margai Technical University
1,540
Onboarding
TPEMIS-NJMS-04
Njala Model Secondary
410
Active
Total
4 institutions
5,970
Institutions enrolled on TpEMIS
Semantics
| Aspect | shadcn | RN | Notes |
|---|---|---|---|
| Root element | <table> | <View role="table"> | Horizontal overflow wrapper on both |
| Row groups | <thead>/<tbody>/<tfoot> | <View role="rowgroup"> | Separate roles forwarded |
| Rows | <tr> | <View role="row"> | Flex-row layout; RN has no native <tr> |
| Headers | <th scope="col"> | <View role="columnheader" scope> | scope forwarded via cast |
| Cells | <td> | <View role="cell"> | Width prop pins column width |
| Caption | <caption> | <Text> below the table | Placed after slots for RN layout |
Native caveat
On iOS / Android the `role` attributes are silently ignored. The flex layout still produces a legible grid, but for complex data tables a dedicated native DataTable component (future phase) will replace this. The API stays the same.