star rating precision config

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}
           />
+          <Typography variant="overline">Slider precision stars</Typography>
+          <Slider
+            defaultValue={0.5}
+            value={config.precision}
+            getAriaValueText={(v) => `${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:

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 (
     <MuiRating
       name={`${row.id}-${column.key as string}`}
@@ -30,6 +33,7 @@ export default function Rating({
       emptyIcon={<StarBorderIcon />}
       // TODO: Make this customisable in config
       max={max ?? 5}
+      precision={precision ?? 1}
       classes={{ root: classes.rating, iconEmpty: classes.iconEmpty }}
     />
   );