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 { thead > tr > th {
padding-right: 1.4em; padding-right: 0;
position: relative; position: relative;
background: ${({ theme: { colors } }) => colors.grayscale.light5}; background: ${({ theme: { colors } }) => colors.grayscale.light5};
text-align: left; text-align: left;
} }
th svg { th svg {
color: ${({ theme: { colors } }) => colors.grayscale.light2}; color: ${({ theme: { colors } }) => colors.grayscale.light2};
position: relative; margin: ${({ theme: { gridUnit } }) => gridUnit / 2}px;
vertical-align: middle;
margin: 0 ${({ theme: { gridUnit } }) => gridUnit}px;
} }
th.is-sorted svg { th.is-sorted svg {
color: ${({ theme: { colors } }) => colors.grayscale.base}; color: ${({ theme: { colors } }) => colors.grayscale.base};

View File

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