Skip to content

Commit

Permalink
fix: gap between table cells
Browse files Browse the repository at this point in the history
  • Loading branch information
@tewarig
tewarig committed Jan 21, 2025
1 parent e236d3e commit bf39ca1
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 24 deletions.
50 changes: 27 additions & 23 deletions packages/blade/src/components/Table/Table.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ const StyledReactTable = styled(ReactTable)<{
}),
// auto is isVirtualized ? 'scroll' : 'auto',
});
//TODO: fix this
const $isSelectable = true;
const $showStripedRows = true;

Expand Down Expand Up @@ -153,32 +154,35 @@ const StyledReactTable = styled(ReactTable)<{
tr: {
display: 'grid',
gridTemplateColumns: 'var(--data-table-library_grid-template-columns)',
columnGap: '0',
},
'.tbody tr:last-child .cell-wrapper': {
'.tbody div tr:last-child .cell-wrapper': {
borderBottom: 'none',
},

'.tbody .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': {
'.tbody div.row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected),
},
'.tbody .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': {
'.tbody div td': {
padding: '0',
},
'.tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover),
...getTableActionsHoverStyles({
hoverColor: tableRow.nonStripe.backgroundColorSelectedHover,
backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover,
theme,
}),
border: '1px solid red',
},
'.tbody .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': {
'.tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus),
...getTableActionsHoverStyles({
hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus,
backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus,
theme,
}),
},
'.tbody .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': {
'.tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive),
...getTableActionsHoverStyles({
hoverColor: tableRow.nonStripe.backgroundColorSelectedActive,
Expand All @@ -188,70 +192,70 @@ const StyledReactTable = styled(ReactTable)<{
},

...($isSelectable && {
'.tbody tr:active:not(.disabled-row) .cell-wrapper': {
'.tbody div tr:active:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive),
},
}),

...($showStripedRows && {
'.tbody tr:nth-child(even) .cell-wrapper': {
'.tbody div tr:nth-child(even) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor),
},
'.tbody tr:nth-child(even) .cell-wrapper-base': {
'.tbody div tr:nth-child(even) .cell-wrapper-base': {
backgroundColor: tableRow.stripe.backgroundColor,
},
}),

...($showStripedRows &&
$isSelectable && {
'.tbody tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {
'.tbody div tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover),
},
'.tbody tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {
'.tbody div tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus),
},
'.tbody tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': {
'.tbody div tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive),
},
'.tbody .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': {
'.tbody div .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected),
},
'.tbody .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {
'.tbody div .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(
theme.colors,
tableRow.stripeWrapper.backgroundColorSelectedHover,
),
},
'.tbody .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {
'.tbody div .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(
theme.colors,
tableRow.stripeWrapper.backgroundColorSelectedFocus,
),
},
'.tbody .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': {
'.tbody div .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(
theme.colors,
tableRow.stripeWrapper.backgroundColorSelectedActive,
),
},

'.tbody tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': {
'.tbody div tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorHover,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover,
}),
},
'.tbody tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': {
'.tbody div tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorFocus,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus,
}),
},
'.tbody tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': {
'.tbody div tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorActive,
Expand All @@ -260,31 +264,31 @@ const StyledReactTable = styled(ReactTable)<{
}),
},

'.tbody .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': {
'.tbody div .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorSelected,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected,
}),
},
'.tbody .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': {
'.tbody div .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorSelectedHover,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover,
}),
},
'.tbody .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': {
'.tbody div .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorSelectedFocus,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus,
}),
},
'.tbody .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': {
'.tbody div .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorSelectedActive,
Expand Down
3 changes: 2 additions & 1 deletion packages/blade/src/components/Table/docs/BasicTable.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,13 +153,14 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
}}
ref={tableRef}
isVirtualized
defaultSelectedIds={['1', '3']}
>
{(tableData) => (
<TableVirtulized
tableData={tableData}
rowHeight={(item, index) => {
// header height and row height
return index === 0 ? 50 : 58;
return index === 0 ? 50 : 57.5;
}}
// header={()=>{}}
header={() => (
Expand Down

0 comments on commit bf39ca1

Please sign in to comment.