diff --git a/src/theme/components/table.js b/src/theme/components/table.js index c1049f8..30ec497 100644 --- a/src/theme/components/table.js +++ b/src/theme/components/table.js @@ -1,12 +1,21 @@ +const baseStyles = { + fontSize: '16px', + height: '35px', + table: { + background: 'brand.white', + borderRadius: '0 0 10px 10px' + } +}; + +const stickyTable = { + position: 'sticky', + left: '0' +}; + const table = { variants: { reg: { - fontSize: '16px', - height: '35px', - table: { - background: 'brand.white', - borderRadius: '0 0 10px 10px' - }, + ...baseStyles, thead: { color: 'brand.primary' }, @@ -29,6 +38,28 @@ const table = { textAlign: 'left', padding: '10px 20px' } + }, + + fixedFirstColumn: { + ...baseStyles, + tr: { + '& th:first-of-type': { + ...stickyTable, + backgroundColor: 'brand.white' + }, + '&:nth-of-type(even) td:first-of-type ': { + backgroundColor: 'brand.neutral50' + }, + '&:nth-of-type(odd) td:first-of-type ': { + backgroundColor: 'brand.white' + } + }, + + td: { + '&:first-of-type': { + ...stickyTable + } + } } } };