admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Lucas/t 295 fix checkbox column width (#261)

Browse Source 
* wip

* Fixed table and column width

* Use last resizable column instead of table width 100%

* Removed comments

* Fix lint

* Fixed table theme

* Removed left clickable margin

* Removed overflow

* Added table width
This commit is contained in:
Lucas Bordeau
2023-06-12 12:47:35 +02:00
committed by GitHub
parent 551cd00790
commit 05d22c1b06
8 changed files with 64 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/modules/ui/components/table/CheckboxCell.tsx
View File

@ -15,10 +15,7 @@ type OwnProps = {
};
const StyledContainer = styled.div`
width: 32px;
height: 32px;
margin-left: -${(props) => props.theme.table.horizontalCellMargin};
padding-left: ${(props) => props.theme.table.horizontalCellMargin};
display: flex;
align-items: center;

28
front/src/modules/ui/components/table/EntityTable.tsx
View File

@ -39,8 +39,8 @@ type OwnProps<
};
const StyledTable = styled.table`
min-width: 1000px;
width: calc(100% - 2 * ${(props) => props.theme.table.horizontalCellMargin});
width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
border-radius: 4px;
border-spacing: 0;
border-collapse: collapse;
@ -54,11 +54,17 @@ const StyledTable = styled.table`
padding: 0;
border: 1px solid ${(props) => props.theme.tertiaryBackground};
text-align: left;
:last-child {
border-right-color: transparent;
}
:first-of-type {
border-left-color: transparent;
border-right-color: transparent;
}
:last-of-type {
width: 100%;
min-width: 0;
}
}
@ -67,12 +73,19 @@ const StyledTable = styled.table`
color: ${(props) => props.theme.text80};
padding: 0;
border: 1px solid ${(props) => props.theme.tertiaryBackground};
text-align: left;
:last-child {
border-right-color: transparent;
}
:first-of-type {
border-left-color: transparent;
border-right-color: transparent;
}
:last-of-type {
width: 100%;
min-width: 0;
}
}
`;
@ -160,7 +173,9 @@ export function EntityTable<
<th
key={header.id}
style={{
width: `${header.getSize()}px`,
width: header.column.getSize(),
minWidth: header.column.getSize(),
maxWidth: header.column.getSize(),
}}
>
{header.isPlaceholder
@ -171,6 +186,7 @@ export function EntityTable<
)}
</th>
))}
<th></th>
</tr>
))}
</thead>
@ -188,6 +204,11 @@ export function EntityTable<
onContextMenu={(event) =>
handleContextMenu(event, row.original.id)
}
style={{
width: cell.column.getSize(),
minWidth: cell.column.getSize(),
maxWidth: cell.column.getSize(),
}}
>
{flexRender(
cell.column.columnDef.cell,
@ -196,6 +217,7 @@ export function EntityTable<
</td>
);
})}
<td></td>
</StyledRow>
))}
</tbody>