Props
| Name | Type | Default value | Required? | Description |
|---|---|---|---|---|
count | Number | - | Yes | The current count value, used to highlight the selected cell. |
choreo | Object | - | No | The choreography object containing hits and counts. |
interactive | Boolean | true | No | Whether the table is interactive (clickable). |
stickyHeader | Boolean | true | No | Whether the header should stick to the top when scrolling. |
fontSize | Number | - | Yes | The font size for the table cells. |
startCount | Number | 0 | No | The starting count for the table, used to calculate the achter values. |
fixed | Boolean | false | No | Whether the table should have fixed headers and footers. |
Computed
| Name | Type | Description |
|---|---|---|
achter | Array | An array of objects representing the "achter" rows, each containing counts and hits. |
tableHeight | String | The height of the table, calculated based on the window height. |
Events
| Name | Payload Type | Description |
|---|---|---|
setCounter | Number | Emitted when a count is set by clicking a button. The value is calculated as `achter * 8 + count`. |
openCreateHitModal | null | Notifies parent component to call open() on CreateHitModal |
Examples
<CountSheet :count="0" :fontSize="16" @setCounter="handler" @openCreateHitModal="handler" /><CountSheet :count="0" :choreo="choreoObj" :interactive="false" :stickyHeader="false" :fontSize="18" :startCount="2" :fixed="true" @setCounter="handler" @openCreateHitModal="handler" />