Revenue Share Table
How a payout splits between parties. The unallocated remainder gets a named row instead of leaving the reader to subtract, and a split exceeding 100% is called out rather than quietly rendered.
src/components/ui/revenue-share-table.tsxAbout
From the component's own source, where it was written.
How a payout splits between parties.
The rows are shares of a gross figure, so the table adds them up and shows the remainder as a named row rather than leaving the reader to subtract. A split that does not reach 100% is the normal case — the house keeps the rest — and a split that exceeds it is a configuration error worth seeing immediately.
Each party's amount is computed from the gross rather than passed in, because a percentage beside an amount that contradicts it is worse than either alone.
Install
npx astralyx-ui add revenue-share-table
Usage
import { RevenueShareTable } from '@/components/ui/revenue-share-table'
<RevenueShareTable rows={rows} gross={48210} currency="USD" />Composer
Change the props and the source below follows.
| Party | Share | Amount |
|---|---|---|
| Publisher — nightjar.mediaTier 2 rate | 35% | US$16,873.50 |
| Sub-affiliate | 10% | US$4,821.00 |
| Network fee | 5% | US$2,410.50 |
| Retained | 50.0% | US$24,105.00 |
| Gross | 100% | US$48,210.00 |
<RevenueShareTable rows={rows} gross={48210} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
Types
Behaviour
| Topic | Detail | Description |
|---|---|---|
| remainder | named row | What is left over gets a row of its own. A split reaching only 90% is normal — the house keeps the rest — and it should be visible. |
| over-allocation | flagged | Shares totalling more than 100% render as an "Over-allocated" row in the destructive tone. That is a configuration error, not a display problem. |