diff --git a/www/src/components/Table/ColumnMenu/Settings/index.tsx b/www/src/components/Table/ColumnMenu/Settings/index.tsx index 7864f682..771d64be 100644 --- a/www/src/components/Table/ColumnMenu/Settings/index.tsx +++ b/www/src/components/Table/ColumnMenu/Settings/index.tsx @@ -126,7 +126,7 @@ const ConfigFields = ({ fieldType, config, handleChange, tables, columns }) => { defaultValue={5} value={config.max} getAriaValueText={(v) => `${v} max stars`} - aria-labelledby="discrete-slider" + aria-labelledby="max-slider" valueLabelDisplay="auto" onChange={(_, v) => { handleChange("max")(v); @@ -136,6 +136,21 @@ const ConfigFields = ({ fieldType, config, handleChange, tables, columns }) => { min={1} max={15} /> + Slider precision stars + `${v} rating step size`} + aria-labelledby="precision-slider" + valueLabelDisplay="auto" + onChange={(_, v) => { + handleChange("precision")(v); + }} + step={0.25} + marks + min={0.25} + max={1} + /> ); case FieldType.action: diff --git a/www/src/components/Table/formatters/Rating.tsx b/www/src/components/Table/formatters/Rating.tsx index dc59c075..5e56b082 100644 --- a/www/src/components/Table/formatters/Rating.tsx +++ b/www/src/components/Table/formatters/Rating.tsx @@ -19,7 +19,10 @@ export default function Rating({ onSubmit, }: CustomCellProps) { const classes = useStyles(); - const { max } = (column as any).config as { max: number }; + const { max, precision } = (column as any).config as { + max: number; + precision: number; + }; return ( } // TODO: Make this customisable in config max={max ?? 5} + precision={precision ?? 1} classes={{ root: classes.rating, iconEmpty: classes.iconEmpty }} /> );