fix: Position of arrows in Table chart (#18739)

* Fix arrow position

* Improve position

* Add right position

* Improve styling
This commit is contained in:
Geido 2022-02-22 15:42:05 +02:00 committed by GitHub
parent 7cad143ae6
commit a9a892945e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 6 deletions

View File

@ -33,16 +33,14 @@ export default styled.div`
}
thead > tr > th {
padding-right: 1.4em;
padding-right: 0;
position: relative;
background: ${({ theme: { colors } }) => colors.grayscale.light5};
text-align: left;
}
th svg {
color: ${({ theme: { colors } }) => colors.grayscale.light2};
position: relative;
vertical-align: middle;
margin: 0 ${({ theme: { gridUnit } }) => gridUnit}px;
margin: ${({ theme: { gridUnit } }) => gridUnit / 2}px;
}
th.is-sorted svg {
color: ${({ theme: { colors } }) => colors.grayscale.base};

View File

@ -430,8 +430,15 @@ export default function TableChart<D extends DataRecord = DataRecord>(
}}
/>
) : null}
{label}
<SortIcon column={col} />
<div
css={{
display: 'inline-flex',
alignItems: 'center',
}}
>
<span>{label}</span>
<SortIcon column={col} />
</div>
</th>
),
Footer: totals ? (