diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js index ca756e8..afbc104 100644 --- a/src/components/Table/Table.js +++ b/src/components/Table/Table.js @@ -36,6 +36,7 @@ const Table = ({ showDefaultFooter, showPagination, total, + paintFreeRowsColor, ...props }) => { const columnsData = Array.isArray(columns) ? columns : []; @@ -114,11 +115,16 @@ const Table = ({ )} {!isLoading && data.length > 0 && buildRows(data, columnsData).map(row => ( - {columnsData.map(header => ( - - {row[header.key]} - - ))} + {columnsData.map(header => { + const isEmpty = row[header.key] == null || row[header.key] === ''; + const rowsStyle = isEmpty && paintFreeRowsColor !== undefined + ? {backgroundColor: `${paintFreeRowsColor}`} : (row.style || ''); + return ( + + {row[header.key]} + + ); + })} ))} @@ -140,6 +146,7 @@ const Table = ({ }; Table.propTypes = { + paintFreeRowsColor: PropTypes.string, caption: PropTypes.string, columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired, data: PropTypes.arrayOf(PropTypes.shape({})), @@ -164,14 +171,15 @@ Table.defaultProps = { emptyMessage: 'No hay resultados', isLoading: false, name: 'table', - onSearch: () => {}, + onSearch: () => { }, onSort: undefined, paginationStyles: undefined, params: undefined, perPage: 0, showDefaultFooter: true, showPagination: true, - total: 0 + total: 0, + paintFreeRowsColor: undefined }; export default Table; diff --git a/src/theme/components/table.js b/src/theme/components/table.js index c1049f8..f779d75 100644 --- a/src/theme/components/table.js +++ b/src/theme/components/table.js @@ -29,6 +29,34 @@ const table = { textAlign: 'left', padding: '10px 20px' } + }, + fixedFirstColumn: { + fontSize: '16px', + height: '35px', + table: { + background: 'white', + borderRadius: '0 0 10px 10px' + }, + tr: { + '& th:first-of-type': { + position: 'sticky', + left: '0', + backgroundColor: 'white' + }, + '&:nth-of-type(even) td:first-of-type ': { + backgroundColor: 'brand.neutral50' + }, + '&:nth-of-type(odd) td:first-of-type ': { + backgroundColor: 'white' + } + }, + + td: { + '&:first-of-type': { + position: 'sticky', + left: '0' + } + } } } };