ColumnFilterButton correction and table DOM structure correction

This commit is contained in:
Mateusz Tylka 2023-08-11 13:10:56 +02:00
parent 6c4da8c181
commit 836ec0aef2
5 changed files with 49 additions and 46 deletions

View File

@ -8,32 +8,38 @@ import RowsBackgroundStyle from '../../styles/RowsBackgroundStyle';
const DesktopTable = (props) => {
return (
<TableStyle rowFooter={props.rowFooter}>
<TableHeader
orderedKeys={props.orderedKeys}
sortByUpdate={props.sortByUpdate}
tableUpdate={props.tableUpdate}
/>
{props.elements.map((item, i) => {
return (
<tr key={`table-row-${i}`} className="TableStyle__tr">
<TableRowItems orderedKeys={props.orderedKeys} item={item} i={i} />
<TableRowFooter
deleteItem={() => {
props.setItemToHandle(item);
props.setDeletePopUp(true);
}}
editItem={() => {
props.setItemToHandle(item);
props.setEditPopUp(true);
}}
rowFooter={props.rowFooter}
item={item}
i={i}
/>
<RowsBackgroundStyle i={i} />
</tr>
);
})}
<tbody>
<TableHeader
orderedKeys={props.orderedKeys}
sortByUpdate={props.sortByUpdate}
tableUpdate={props.tableUpdate}
/>
{props.elements.map((item, i) => {
return (
<tr key={`table-row-${i}`} className="TableStyle__tr">
<TableRowItems
orderedKeys={props.orderedKeys}
item={item}
i={i}
/>
<TableRowFooter
deleteItem={() => {
props.setItemToHandle(item);
props.setDeletePopUp(true);
}}
editItem={() => {
props.setItemToHandle(item);
props.setEditPopUp(true);
}}
rowFooter={props.rowFooter}
item={item}
i={i}
/>
<RowsBackgroundStyle i={i} as="td" />
</tr>
);
})}
</tbody>
</TableStyle>
);
};

View File

@ -25,17 +25,19 @@ const TableHeader = (props) => {
props.tableUpdate();
}}
>
{keyValue}
<FlexRow
as="span"
className="TableStyle__sort-button"
column={keyValue}
>
<ColumnFilterIcon
index={i}
active={activeIcon}
rotateIcon={rotateActiveIcon}
/>
<FlexRow as="span" alignmentX="flex-start" gap="8px" width="100%">
{keyValue}
<FlexRow
as="span"
className="TableStyle__sort-button"
column={keyValue}
>
<ColumnFilterIcon
index={i}
active={activeIcon}
rotateIcon={rotateActiveIcon}
/>
</FlexRow>
</FlexRow>
</th>
);

View File

@ -21,7 +21,9 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
return (
<td key={`table-item-${i}-${j}`} className="TableStyle__td">
{IS_MOBILE() && (
<Container className="mobile-table-header">{keyValue}</Container>
<Container as="span" className="mobile-table-header">
{keyValue}
</Container>
)}
{renderValue(keyValue)}
{keyValue === '#' && i + 1}

View File

@ -3,7 +3,7 @@ import { FlexRow } from '../../../../../utils/containers';
const TableRowTags = ({ item, i }) => {
return (
<FlexRow className="TableStyle__tags-container">
<FlexRow as="span" className="TableStyle__tags-container">
{renderTags(item.tags)}
</FlexRow>
);

View File

@ -6,7 +6,6 @@ const TableStyle = styled.table`
width: 100%;
.TableStyle__th {
position: relative;
cursor: pointer;
* {
cursor: pointer;
@ -62,12 +61,6 @@ const TableStyle = styled.table`
gap: 4px;
padding: 0 2px;
}
.TableStyle__sort-button {
position: absolute;
top: 15px;
right: 16%;
}
`;
export default TableStyle;