UsageMeterField
Renders a usage-vs-quota value as a progress meter.
Installation
pnpm dlx shadcn@latest add @chelone/usage-meter-fieldRenders a usage-vs-quota value as a progress meter.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cellClassName | string | — | A class name to apply to the cell element when used inside `<DataTable>`. |
| className | string | — | A class name to apply to the root element. |
| empty | ReactNode | — | The node to display when the field value is empty. Defaults to nothing. A string is translated; a ReactNode renders as-is. |
| headerClassName | string | — | A class name to apply to the header cell element when used inside `<DataTable>`. |
| label | ReactNode | — | Label to use as column header when using `<DataTable>` or `<SimpleShowLayout>`. Defaults to the capitalized field name. Set to `false` to disable the label. |
| limitSource | string | — | Sibling record field holding the limit/quota. Bar is only shown when set. |
| record | RecordType | — | The record to render. Defaults to the ambient `RecordContext` value. |
| resource | string | — | The resource name. Defaults to the ambient `ResourceContext` value. |
| sortable | boolean | — | Disable the header click handler when used inside `<DataTable>`. |
| sortBy | string | — | The field to sort by when this column head is clicked, if sortable. |
| sortByOrder | SortOrder | — | The order used for sorting when this column head is clicked, if sortable. |
| source | string | — | Name of the property to display (dot/bracket path). |
| textAlign | TextAlign | — | The text alignment for the cell content, when used inside `<DataTable>`. |
| thresholds | { critical: number; warning: number } | — | Ratio thresholds for warning + critical states. Defaults `{ warning: 0.8, critical: 1.0 }`. |
| unit | string | — | Optional unit suffix (e.g. "GB", "requests"). |