import { ArvadosTheme } from "common/custom-theme";
interface ColumnSelectorDataProps {
- columns: DataColumns<any>;
- onColumnToggle: (column: DataColumn<any>) => void;
+ columns: DataColumns<any, any>;
+ onColumnToggle: (column: DataColumn<any, any>) => void;
+ className?: string;
}
-type CssRules = "checkbox";
+type CssRules = "checkbox" | "listItem" | "listItemText";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
checkbox: {
width: 24,
height: 24
+ },
+ listItem: {
+ padding: 0
+ },
+ listItemText: {
+ paddingTop: '0.2rem'
}
});
<ListItem
button
key={index}
+ className={classes.listItem}
onClick={() => onColumnToggle(column)}>
<Checkbox
disableRipple
color="primary"
checked={column.selected}
className={classes.checkbox} />
- <ListItemText>
+ <ListItemText
+ className={classes.listItemText}>
{column.name}
</ListItemText>
</ListItem>