TableSortLabel API
Documentação da API para o componente React TableSortLabel . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import TableSortLabel from '@mui/material/TableSortLabel';
// ou
import { TableSortLabel } from '@mui/material';A button based label for placing inside TableCell for column sorting.
Nome do componente
The nameMuiTableSortLabel can be used when providing default props or style overrides in the theme.Propriedades
Props of the ButtonBase component are also available.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| active | bool | false | If true, the label will have the active styling (should be true for the sorted column). |
| children | node | Label contents, the arrow will be appended automatically. | |
| classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| direction | 'asc' | 'desc' | 'asc' | The current sort direction. |
| hideSortIcon | bool | false | Hide sort icon when active is false. |
| IconComponent | elementType | ArrowDownwardIcon | Sort icon to use. |
| sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
O
ref é encaminhado para o elemento raiz.Herança
Embora não explicitamente documentado acima, as propriedades do componente ButtonBase também estão disponíveis em TableSortLabel. Você pode tirar vantagem disso para manipular componentes aninhados.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiTableSortLabel-root | Estilos aplicados ao elemento raiz. |
| active | .MuiTableSortLabel-active | Pseudo-class aplicada a o elemento raiz se active={true}. |
| icon | .MuiTableSortLabel-icon | Estilos aplicados a the icon component. |
| iconDirectionDesc | .MuiTableSortLabel-iconDirectionDesc | Estilos aplicados para the icon component se direction="desc". |
| iconDirectionAsc | .MuiTableSortLabel-iconDirectionAsc | Estilos aplicados para the icon component se direction="asc". |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.