| Q1 | Q2 | |||||||
|---|---|---|---|---|---|---|---|---|
| Buttons 1 | 3 | 7 | 10 | 12 | 62% | 68% | Review | +6% |
| Inputs 2 | 4 | 9 | 13 | 16 | 63% | 69% | Pass | +7% |
| Overlays 3 | 5 | 11 | 16 | 20 | 64% | 70% | Pass | +8% |
| Navigation 4 | 6 | 13 | 19 | 24 | 65% | 71% | Pass | +9% |
| Data display 5 | 7 | 15 | 22 | 28 | 66% | 72% | Pass | +10% |
| Feedback 6 | 8 | 17 | 25 | 32 | 67% | 73% | Review | +11% |
| Layout 7 | 9 | 19 | 28 | 36 | 68% | 74% | Pass | +12% |
| Content 8 | 10 | 14 | 24 | 33 | 69% | 75% | Pass | +13% |
| Buttons 9 | 11 | 16 | 27 | 37 | 70% | 76% | Pass | +14% |
| Inputs 10 | 12 | 18 | 21 | 32 | 71% | 77% | Pass | +15% |
| Overlays 11 | 13 | 20 | 24 | 36 | 72% | 78% | Review | +16% |
| Navigation 12 | 14 | 22 | 27 | 29 | 73% | 79% | Pass | +17% |
| Data display 13 | 15 | 24 | 30 | 33 | 74% | 80% | Pass | +18% |
| Feedback 14 | 16 | 26 | 33 | 37 | 75% | 81% | Pass | +19% |
| Layout 15 | 17 | 21 | 29 | 34 | 76% | 82% | Pass | +20% |
| Content 16 | 18 | 23 | 32 | 38 | 77% | 83% | Review | +21% |
| Buttons 17 | 19 | 25 | 35 | 42 | 78% | 84% | Pass | +22% |
| Inputs 18 | 20 | 27 | 38 | 46 | 79% | 85% | Pass | +23% |
| Overlays 19 | 21 | 29 | 32 | 41 | 80% | 86% | Pass | +24% |
| Navigation 20 | 3 | 12 | 16 | 26 | 81% | 87% | Pass | +6% |
| Data display 21 | 4 | 14 | 19 | 30 | 82% | 88% | Review | +7% |
| Feedback 22 | 5 | 9 | 15 | 27 | 83% | 89% | Pass | +8% |
| Layout 23 | 6 | 11 | 18 | 20 | 84% | 90% | Pass | +9% |
| Content 24 | 7 | 13 | 21 | 24 | 85% | 91% | Pass | +10% |
| Buttons 25 | 8 | 15 | 24 | 28 | 86% | 92% | Pass | +11% |
| Inputs 26 | 9 | 17 | 27 | 32 | 87% | 93% | Review | +12% |
| Overlays 27 | 10 | 19 | 30 | 36 | 88% | 94% | Pass | +13% |
| Navigation 28 | 11 | 21 | 24 | 31 | 89% | 95% | Pass | +14% |
| Data display 29 | 12 | 16 | 20 | 28 | 90% | 68% | Pass | +15% |
| Feedback 30 | 13 | 18 | 23 | 32 | 91% | 69% | Pass | +16% |
| Layout 31 | 14 | 20 | 26 | 36 | 92% | 70% | Review | +17% |
| Content 32 | 15 | 22 | 29 | 40 | 93% | 71% | Pass | +18% |
| Buttons 33 | 16 | 24 | 32 | 44 | 94% | 72% | Pass | +19% |
| Inputs 34 | 17 | 26 | 35 | 37 | 95% | 73% | Pass | +20% |
| Overlays 35 | 18 | 28 | 38 | 41 | 96% | 74% | Pass | +21% |
| Navigation 36 | 19 | 23 | 34 | 38 | 97% | 75% | Review | +22% |
| Data display 37 | 20 | 25 | 28 | 33 | 62% | 76% | Pass | +23% |
| Feedback 38 | 21 | 27 | 31 | 37 | 63% | 77% | Pass | +24% |
| Layout 39 | 3 | 10 | 15 | 22 | 64% | 78% | Pass | +6% |
| Content 40 | 4 | 12 | 18 | 26 | 65% | 79% | Pass | +7% |
| Buttons 41 | 5 | 14 | 21 | 30 | 66% | 80% | Review | +8% |
| Inputs 42 | 6 | 16 | 24 | 34 | 67% | 81% | Pass | +9% |
| Overlays 43 | 7 | 11 | 20 | 31 | 68% | 82% | Pass | +10% |
| Navigation 44 | 8 | 13 | 23 | 35 | 69% | 83% | Pass | +11% |
| Data display 45 | 9 | 15 | 26 | 28 | 70% | 84% | Pass | +12% |
| Feedback 46 | 10 | 17 | 20 | 23 | 71% | 85% | Review | +13% |
| Layout 47 | 11 | 19 | 23 | 27 | 72% | 86% | Pass | +14% |
| Content 48 | 12 | 21 | 26 | 31 | 73% | 87% | Pass | +15% |
| Buttons 49 | 13 | 23 | 29 | 35 | 74% | 88% | Pass | +16% |
| Inputs 50 | 14 | 18 | 25 | 32 | 75% | 89% | Pass | +17% |
| Overlays 51 | 15 | 20 | 28 | 36 | 76% | 90% | Review | +18% |
| Navigation 52 | 16 | 22 | 31 | 40 | 77% | 91% | Pass | +19% |
| Data display 53 | 17 | 24 | 34 | 44 | 78% | 92% | Pass | +20% |
| Feedback 54 | 18 | 26 | 37 | 48 | 79% | 93% | Pass | +21% |
| Layout 55 | 19 | 28 | 31 | 43 | 80% | 94% | Pass | +22% |
| Content 56 | 20 | 30 | 34 | 36 | 81% | 95% | Review | +23% |
| Buttons 57 | 21 | 25 | 30 | 33 | 82% | 68% | Pass | +24% |
| Inputs 58 | 3 | 8 | 14 | 18 | 83% | 69% | Pass | +6% |
| Overlays 59 | 4 | 10 | 17 | 22 | 84% | 70% | Pass | +7% |
| Navigation 60 | 5 | 12 | 20 | 26 | 85% | 71% | Pass | +8% |
| Data display 61 | 6 | 14 | 23 | 30 | 86% | 72% | Review | +9% |
| Feedback 62 | 7 | 16 | 26 | 34 | 87% | 73% | Pass | +10% |
| Layout 63 | 8 | 18 | 29 | 38 | 88% | 74% | Pass | +11% |
| Content 64 | 9 | 13 | 16 | 26 | 89% | 75% | Pass | +12% |
| Buttons 65 | 10 | 15 | 19 | 30 | 90% | 76% | Pass | +13% |
| Inputs 66 | 11 | 17 | 22 | 34 | 91% | 77% | Review | +14% |
| Overlays 67 | 12 | 19 | 25 | 27 | 92% | 78% | Pass | +15% |
| Navigation 68 | 13 | 21 | 28 | 31 | 93% | 79% | Pass | +16% |
| Data display 69 | 14 | 23 | 31 | 35 | 94% | 80% | Pass | +17% |
| Feedback 70 | 15 | 25 | 34 | 39 | 95% | 81% | Pass | +18% |
| Layout 71 | 16 | 20 | 30 | 36 | 96% | 82% | Review | +19% |
| Content 72 | 17 | 22 | 33 | 40 | 97% | 83% | Pass | +20% |
| Buttons 73 | 18 | 24 | 27 | 35 | 62% | 84% | Pass | +21% |
| Inputs 74 | 19 | 26 | 30 | 39 | 63% | 85% | Pass | +22% |
| Overlays 75 | 20 | 28 | 33 | 43 | 64% | 86% | Pass | +23% |
| Navigation 76 | 21 | 30 | 36 | 47 | 65% | 87% | Review | +24% |
| Data display 77 | 3 | 13 | 20 | 32 | 66% | 88% | Pass | +6% |
| Feedback 78 | 4 | 8 | 16 | 18 | 67% | 89% | Pass | +7% |
| Layout 79 | 5 | 10 | 19 | 22 | 68% | 90% | Pass | +8% |
| Content 80 | 6 | 12 | 22 | 26 | 69% | 91% | Pass | +9% |
| Buttons 81 | 7 | 14 | 25 | 30 | 70% | 92% | Review | +10% |
| Inputs 82 | 8 | 16 | 19 | 25 | 71% | 93% | Pass | +11% |
| Overlays 83 | 9 | 18 | 22 | 29 | 72% | 94% | Pass | +12% |
| Navigation 84 | 10 | 20 | 25 | 33 | 73% | 95% | Pass | +13% |
| Data display 85 | 11 | 15 | 21 | 30 | 74% | 68% | Pass | +14% |
| Feedback 86 | 12 | 17 | 24 | 34 | 75% | 69% | Review | +15% |
| Layout 87 | 13 | 19 | 27 | 38 | 76% | 70% | Pass | +16% |
| Content 88 | 14 | 21 | 30 | 42 | 77% | 71% | Pass | +17% |
| Buttons 89 | 15 | 23 | 33 | 35 | 78% | 72% | Pass | +18% |
| Inputs 90 | 16 | 25 | 36 | 39 | 79% | 73% | Pass | +19% |
| Overlays 91 | 17 | 27 | 30 | 34 | 80% | 74% | Review | +20% |
| Navigation 92 | 18 | 22 | 26 | 31 | 81% | 75% | Pass | +21% |
| Data display 93 | 19 | 24 | 29 | 35 | 82% | 76% | Pass | +22% |
| Feedback 94 | 20 | 26 | 32 | 39 | 83% | 77% | Pass | +23% |
| Layout 95 | 21 | 28 | 35 | 43 | 84% | 78% | Pass | +24% |
| Content 96 | 3 | 11 | 19 | 28 | 85% | 79% | Review | +6% |
| Buttons 97 | 4 | 13 | 22 | 32 | 86% | 80% | Pass | +7% |
| Inputs 98 | 5 | 15 | 25 | 36 | 87% | 81% | Pass | +8% |
| Overlays 99 | 6 | 10 | 21 | 33 | 88% | 82% | Pass | +9% |
| Navigation 100 | 7 | 12 | 15 | 17 | 89% | 83% | Pass | +10% |
| Data display 101 | 8 | 14 | 18 | 21 | 90% | 84% | Review | +11% |
| Feedback 102 | 9 | 16 | 21 | 25 | 91% | 85% | Pass | +12% |
| Layout 103 | 10 | 18 | 24 | 29 | 92% | 86% | Pass | +13% |
| Content 104 | 11 | 20 | 27 | 33 | 93% | 87% | Pass | +14% |
| Buttons 105 | 12 | 22 | 30 | 37 | 94% | 88% | Pass | +15% |
| Inputs 106 | 13 | 17 | 26 | 34 | 95% | 89% | Review | +16% |
| Overlays 107 | 14 | 19 | 29 | 38 | 96% | 90% | Pass | +17% |
| Navigation 108 | 15 | 21 | 32 | 42 | 97% | 91% | Pass | +18% |
| Data display 109 | 16 | 23 | 26 | 37 | 62% | 92% | Pass | +19% |
| Feedback 110 | 17 | 25 | 29 | 41 | 63% | 93% | Pass | +20% |
| Layout 111 | 18 | 27 | 32 | 34 | 64% | 94% | Review | +21% |
| Content 112 | 19 | 29 | 35 | 38 | 65% | 95% | Pass | +22% |
| Buttons 113 | 20 | 24 | 31 | 35 | 66% | 68% | Pass | +23% |
| Inputs 114 | 21 | 26 | 34 | 39 | 67% | 69% | Pass | +24% |
| Overlays 115 | 3 | 9 | 18 | 24 | 68% | 70% | Pass | +6% |
| Navigation 116 | 4 | 11 | 21 | 28 | 69% | 71% | Review | +7% |
| Data display 117 | 5 | 13 | 24 | 32 | 70% | 72% | Pass | +8% |
| Feedback 118 | 6 | 15 | 18 | 27 | 71% | 73% | Pass | +9% |
| Layout 119 | 7 | 17 | 21 | 31 | 72% | 74% | Pass | +10% |
| Content 120 | 8 | 12 | 17 | 28 | 73% | 75% | Pass | +11% |
| Buttons 121 | 9 | 14 | 20 | 32 | 74% | 76% | Review | +12% |
| Inputs 122 | 10 | 16 | 23 | 25 | 75% | 77% | Pass | +13% |
| Overlays 123 | 11 | 18 | 26 | 29 | 76% | 78% | Pass | +14% |
| Navigation 124 | 12 | 20 | 29 | 33 | 77% | 79% | Pass | +15% |
| Data display 125 | 13 | 22 | 32 | 37 | 78% | 80% | Pass | +16% |
| Feedback 126 | 14 | 24 | 35 | 41 | 79% | 81% | Review | +17% |
| Layout 127 | 15 | 19 | 22 | 29 | 80% | 82% | Pass | +18% |
| Content 128 | 16 | 21 | 25 | 33 | 81% | 83% | Pass | +19% |
| Buttons 129 | 17 | 23 | 28 | 37 | 82% | 84% | Pass | +20% |
| Inputs 130 | 18 | 25 | 31 | 41 | 83% | 85% | Pass | +21% |
| Overlays 131 | 19 | 27 | 34 | 45 | 84% | 86% | Review | +22% |
| Navigation 132 | 20 | 29 | 37 | 49 | 85% | 87% | Pass | +23% |
| Data display 133 | 21 | 31 | 40 | 42 | 86% | 88% | Pass | +24% |
| Feedback 134 | 3 | 7 | 17 | 20 | 87% | 89% | Pass | +6% |
| Layout 135 | 4 | 9 | 20 | 24 | 88% | 90% | Pass | +7% |
| Content 136 | 5 | 11 | 14 | 19 | 89% | 91% | Review | +8% |
| Buttons 137 | 6 | 13 | 17 | 23 | 90% | 92% | Pass | +9% |
| Inputs 138 | 7 | 15 | 20 | 27 | 91% | 93% | Pass | +10% |
| Overlays 139 | 8 | 17 | 23 | 31 | 92% | 94% | Pass | +11% |
| Navigation 140 | 9 | 19 | 26 | 35 | 93% | 95% | Pass | +12% |
| Data display 141 | 10 | 14 | 22 | 32 | 94% | 68% | Review | +13% |
| Feedback 142 | 11 | 16 | 25 | 36 | 95% | 69% | Pass | +14% |
| Layout 143 | 12 | 18 | 28 | 40 | 96% | 70% | Pass | +15% |
| Content 144 | 13 | 20 | 31 | 33 | 97% | 71% | Pass | +16% |
| Buttons 145 | 14 | 22 | 25 | 28 | 62% | 72% | Pass | +17% |
| Inputs 146 | 15 | 24 | 28 | 32 | 63% | 73% | Review | +18% |
| Overlays 147 | 16 | 26 | 31 | 36 | 64% | 74% | Pass | +19% |
| Navigation 148 | 17 | 21 | 27 | 33 | 65% | 75% | Pass | +20% |
| Data display 149 | 18 | 23 | 30 | 37 | 66% | 76% | Pass | +21% |
| Feedback 150 | 19 | 25 | 33 | 41 | 67% | 77% | Pass | +22% |
| Layout 151 | 20 | 27 | 36 | 45 | 68% | 78% | Review | +23% |
| Content 152 | 21 | 29 | 39 | 49 | 69% | 79% | Pass | +24% |
| Buttons 153 | 3 | 12 | 23 | 34 | 70% | 80% | Pass | +6% |
| Inputs 154 | 4 | 14 | 17 | 29 | 71% | 81% | Pass | +7% |
| Overlays 155 | 5 | 9 | 13 | 15 | 72% | 82% | Pass | +8% |
| Navigation 156 | 6 | 11 | 16 | 19 | 73% | 83% | Review | +9% |
| Data display 157 | 7 | 13 | 19 | 23 | 74% | 84% | Pass | +10% |
| Feedback 158 | 8 | 15 | 22 | 27 | 75% | 85% | Pass | +11% |
| Layout 159 | 9 | 17 | 25 | 31 | 76% | 86% | Pass | +12% |
| Content 160 | 10 | 19 | 28 | 35 | 77% | 87% | Pass | +13% |
| Buttons 161 | 11 | 21 | 31 | 39 | 78% | 88% | Review | +14% |
| Inputs 162 | 12 | 16 | 27 | 36 | 79% | 89% | Pass | +15% |
| Overlays 163 | 13 | 18 | 21 | 31 | 80% | 90% | Pass | +16% |
| Navigation 164 | 14 | 20 | 24 | 35 | 81% | 91% | Pass | +17% |
| Data display 165 | 15 | 22 | 27 | 39 | 82% | 92% | Pass | +18% |
| Feedback 166 | 16 | 24 | 30 | 32 | 83% | 93% | Review | +19% |
| Layout 167 | 17 | 26 | 33 | 36 | 84% | 94% | Pass | +20% |
| Content 168 | 18 | 28 | 36 | 40 | 85% | 95% | Pass | +21% |
| Buttons 169 | 19 | 23 | 32 | 37 | 86% | 68% | Pass | +22% |
| Inputs 170 | 20 | 25 | 35 | 41 | 87% | 69% | Pass | +23% |
| Overlays 171 | 21 | 27 | 38 | 45 | 88% | 70% | Review | +24% |
| Navigation 172 | 3 | 10 | 13 | 21 | 89% | 71% | Pass | +6% |
| Data display 173 | 4 | 12 | 16 | 25 | 90% | 72% | Pass | +7% |
| Feedback 174 | 5 | 14 | 19 | 29 | 91% | 73% | Pass | +8% |
| Layout 175 | 6 | 16 | 22 | 33 | 92% | 74% | Pass | +9% |
| Content 176 | 7 | 11 | 18 | 30 | 93% | 75% | Review | +10% |
| Buttons 177 | 8 | 13 | 21 | 23 | 94% | 76% | Pass | +11% |
| Inputs 178 | 9 | 15 | 24 | 27 | 95% | 77% | Pass | +12% |
| Overlays 179 | 10 | 17 | 27 | 31 | 96% | 78% | Pass | +13% |
| Navigation 180 | 11 | 19 | 30 | 35 | 97% | 79% | Pass | +14% |
| Data display 181 | 12 | 21 | 24 | 30 | 62% | 80% | Review | +15% |
| Feedback 182 | 13 | 23 | 27 | 34 | 63% | 81% | Pass | +16% |
| Layout 183 | 14 | 18 | 23 | 31 | 64% | 82% | Pass | +17% |
| Content 184 | 15 | 20 | 26 | 35 | 65% | 83% | Pass | +18% |
| Buttons 185 | 16 | 22 | 29 | 39 | 66% | 84% | Pass | +19% |
| Inputs 186 | 17 | 24 | 32 | 43 | 67% | 85% | Review | +20% |
| Overlays 187 | 18 | 26 | 35 | 47 | 68% | 86% | Pass | +21% |
| Navigation 188 | 19 | 28 | 38 | 40 | 69% | 87% | Pass | +22% |
| Data display 189 | 20 | 30 | 41 | 44 | 70% | 88% | Pass | +23% |
| Feedback 190 | 21 | 25 | 28 | 32 | 71% | 89% | Pass | +24% |
| Layout 191 | 3 | 8 | 12 | 17 | 72% | 90% | Review | +6% |
| Content 192 | 4 | 10 | 15 | 21 | 73% | 91% | Pass | +7% |
| Buttons 193 | 5 | 12 | 18 | 25 | 74% | 92% | Pass | +8% |
| Inputs 194 | 6 | 14 | 21 | 29 | 75% | 93% | Pass | +9% |
| Overlays 195 | 7 | 16 | 24 | 33 | 76% | 94% | Pass | +10% |
| Navigation 196 | 8 | 18 | 27 | 37 | 77% | 95% | Review | +11% |
| Data display 197 | 9 | 13 | 23 | 34 | 78% | 68% | Pass | +12% |
| Feedback 198 | 10 | 15 | 26 | 38 | 79% | 69% | Pass | +13% |
| Layout 199 | 11 | 17 | 20 | 22 | 80% | 70% | Pass | +14% |
| Content 200 | 12 | 19 | 23 | 26 | 81% | 71% | Pass | +15% |
Waiting for action
Scrollable data grid with sort, filter, and structural layouts.
| Layout | Behaviour |
|---|---|
flat | Default dense row list. |
grouped | Collapse rows by groupBy with expandable group headers. |
tree | Nested row.children with indent and expand toggles. |
pivot | Client pivot via pivot aggregator into synthetic columns. |
getDetailContent inserts a full-width detail row.rowHeight.hasMore / onLoadMore sentinel at the scroll bottom.| Prop | Type | Default | Description |
|---|---|---|---|
columns | DataGridColumn[] | — | Columns. |
rows | DataGridRow[] | — | Rows (optional nested children). |
layout | "flat" | "grouped" | "tree" | "pivot" | "flat" | Structural mode. |
groupBy | string | — | Group column key when grouped. |
pivot | DataGridPivotConfig | — | Pivot dimensions and aggregator. |
getDetailContent | (row) => ReactNode | — | Master-detail body. |
virtualized | boolean | false | DOM windowing. |
hasMore / onLoadMore | infinite load | — | Bottom sentinel. |
aria-sort on sortable headers.aria-expanded.Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…