diff --git a/src/theme/components/table.js b/src/theme/components/table.js index c1049f8..ba9b05b 100644 --- a/src/theme/components/table.js +++ b/src/theme/components/table.js @@ -1,12 +1,22 @@ +const baseStyles = { + fontSize: '16px', + height: '35px', + table: { + background: 'brand.white', + borderRadius: '0 0 10px 10px' + } +}; + +const fixedFirstColumnStyles = { + position: 'sticky', + left: '0', + backgroundColor: 'brand.white' +}; + const table = { variants: { reg: { - fontSize: '16px', - height: '35px', - table: { - background: 'brand.white', - borderRadius: '0 0 10px 10px' - }, + ...baseStyles, thead: { color: 'brand.primary' }, @@ -29,6 +39,21 @@ const table = { textAlign: 'left', padding: '10px 20px' } + }, + fixedFirstColumn: { + ...baseStyles, + tr: { + 'th:first-of-type': fixedFirstColumnStyles, + '&: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': fixedFirstColumnStyles + } } } };