Skip to content

Instantly share code, notes, and snippets.

@davo

davo/Table.tsx

Created Apr 23, 2019
Embed
What would you like to do?
Custom CSS Props with Styled Components
import * as React from 'react'
import ReactTable from 'react-table'
import { CSSCustomProperties, TableWrapper } from './TableWrapper'
interface Props {
rowSize?: string | number
}
export class Table extends React.Component<Props> {
static defaultProps = {
rowSize: 24
}
render() {
let { rowSize } = this.props
return (
<>
<CSSCustomProperties rowSize={rowSize} {...this.props} />
<TableWrapper>
<ReactTable columns={...} showPagination={false} className="-highlight" />
</TableWrapper>
</>
)
}
}
import styled, { createGlobalStyle, } from 'styled-components'
export const CSSCustomProperties = createGlobalStyle`
:root {
--dimension-spacing-1: 4px;
--defaultLineHeight: 1.25rem;
--gutter: 24px;
--rowSize: ${props => `${props.rowSize}px`};
--accumulatedGutter: calc(var(--gutter) * 11);
--availableSpace: calc(var(--width) - var(--accumulatedGutter));
--columnSize: calc(var(--availableSpace) / 12);
--column-1: var(--columnSize);
--column-2: calc(var(--columnSize) * 2);
--column-3: calc(var(--columnSize) * 3);
}
`
export const TableWrapper = styled.div`
& .ReactTable {
position: relative;
display: flex;
flex-direction: column;
background: var(--tableColor, white);
border: 0px solid rgba(0, 0, 0, 0);
& * {
box-sizing: border-box;
}
}
...
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment