Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 5x 5x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x | /**
* @file TableDensitySetting.tsx
* @module app/HamburgerMenu/AppearanceSettings/TableDensitySetting
*
* @summary
* Table density setting component with comfortable/compact toggle buttons.
* Persists preference via useSettings hook.
*
* @example
* ```tsx
* <TableDensitySetting tableDensity="compact" onChange={handleChange} />
* ```
*/
import { Box, Typography, ToggleButton, ToggleButtonGroup } from '@mui/material';
import { useTranslation } from 'react-i18next';
interface TableDensitySettingProps {
/** Current table density setting (comfortable or compact) */
tableDensity: string;
/** Callback when table density changes */
onChange: (newDensity: 'compact' | 'comfortable') => void;
}
/**
* Table density setting component.
*
* Provides toggle between comfortable and compact table display modes.
*
* @param props - Component props
* @returns JSX element rendering density toggle buttons
*/
export default function TableDensitySetting({
tableDensity,
onChange,
}: TableDensitySettingProps) {
const { t } = useTranslation(['common']);
return (
<Box>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, display: 'block', mb: 0.75 }}>
{t('appearance.density', 'Density')}
</Typography>
<ToggleButtonGroup
value={tableDensity === 'compact' || tableDensity === 'comfortable' ? tableDensity : 'comfortable'}
exclusive
onChange={(_, newDensity) => {
if (newDensity) onChange(newDensity as 'compact' | 'comfortable');
}}
size="small"
fullWidth
>
<ToggleButton value="comfortable">
<Typography variant="caption">
{t('appearance.standard', 'Standard')}
</Typography>
</ToggleButton>
<ToggleButton value="compact">
<Typography variant="caption">
{t('appearance.compact', 'Compact')}
</Typography>
</ToggleButton>
</ToggleButtonGroup>
</Box>
);
}
|