ColumnFilterButton correction and table DOM structure correction
This commit is contained in:
parent
6c4da8c181
commit
836ec0aef2
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user