59e14fabb4
## Proposed Changes - Introduce a new custom hook - useTableSort to sort table content - Add test cases for the new custom hook - Integrate useTableSort hook on to the table in settings object and settings object field pages ## Related Issue https://github.com/twentyhq/twenty/issues/5772 ## Evidence https://github.com/twentyhq/twenty/assets/87609792/8be456ce-2fa5-44ec-8bbd-70fb6c8fdb30 ## Evidence after addressing review comments https://github.com/twentyhq/twenty/assets/87609792/c267e3da-72f9-4c0e-8c94-a38122d6395e ## Further comments Apologies for the large PR. Looking forward for the review --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
25 lines
775 B
TypeScript
25 lines
775 B
TypeScript
import styled from '@emotion/styled';
|
|
|
|
const StyledTableHeader = styled.div<{
|
|
align?: 'left' | 'center' | 'right';
|
|
onClick?: () => void;
|
|
}>`
|
|
align-items: center;
|
|
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
|
|
color: ${({ theme }) => theme.font.color.tertiary};
|
|
display: flex;
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
height: ${({ theme }) => theme.spacing(8)};
|
|
justify-content: ${({ align }) =>
|
|
align === 'right'
|
|
? 'flex-end'
|
|
: align === 'center'
|
|
? 'center'
|
|
: 'flex-start'};
|
|
padding: 0 ${({ theme }) => theme.spacing(2)};
|
|
text-align: ${({ align }) => align ?? 'left'};
|
|
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
|
|
`;
|
|
|
|
export { StyledTableHeader as TableHeader };
|