Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

Commit

Permalink
fix: Make the scrollbar appear inside the table (#1310)
Browse files Browse the repository at this point in the history
* Scroll container

* Add X scroll

* Remove widht min-content
  • Loading branch information
geido authored Aug 24, 2021
1 parent 7e23a3a commit 1aad2d1
Showing 1 changed file with 44 additions and 37 deletions.
81 changes: 44 additions & 37 deletions plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,15 @@ const Styles = styled.div<PivotTableStylesProps>`
margin: ${margin}px;
height: ${height - margin * 2}px;
width: ${width - margin * 2}px;
overflow-y: scroll;
`}
`;

const PivotTableWrapper = styled.div`
height: 100%;
max-width: fit-content;
overflow: auto;
`;

const METRIC_KEY = 'metric';
const iconStyle = { stroke: 'black', strokeWidth: '16px' };

Expand Down Expand Up @@ -254,42 +259,44 @@ export default function PivotTableChart(props: PivotTableProps) {

return (
<Styles height={height} width={width} margin={theme.gridUnit * 4}>
<PivotTable
data={unpivotedData}
rows={rows}
cols={cols}
aggregatorsFactory={aggregatorsFactory}
defaultFormatter={defaultFormatter}
customFormatters={
hasCustomMetricFormatters ? { [METRIC_KEY]: metricFormatters } : undefined
}
aggregatorName={aggregateFunction}
vals={['value']}
rendererName="Table With Subtotal"
colOrder={colOrder}
rowOrder={rowOrder}
sorters={{
metric: sortAs(metricNames),
}}
tableOptions={{
clickRowHeaderCallback: toggleFilter,
clickColumnHeaderCallback: toggleFilter,
colTotals,
rowTotals,
highlightHeaderCellsOnHover: emitFilter,
highlightedHeaderCells: selectedFilters,
omittedHighlightHeaderGroups: [METRIC_KEY],
cellColorFormatters: { [METRIC_KEY]: metricColorFormatters },
dateFormatters,
}}
subtotalOptions={{
colSubtotalDisplay: { displayOnTop: colSubtotalPosition },
rowSubtotalDisplay: { displayOnTop: rowSubtotalPosition },
arrowCollapsed: <PlusSquareOutlined style={iconStyle} />,
arrowExpanded: <MinusSquareOutlined style={iconStyle} />,
}}
namesMapping={verboseMap}
/>
<PivotTableWrapper>
<PivotTable
data={unpivotedData}
rows={rows}
cols={cols}
aggregatorsFactory={aggregatorsFactory}
defaultFormatter={defaultFormatter}
customFormatters={
hasCustomMetricFormatters ? { [METRIC_KEY]: metricFormatters } : undefined
}
aggregatorName={aggregateFunction}
vals={['value']}
rendererName="Table With Subtotal"
colOrder={colOrder}
rowOrder={rowOrder}
sorters={{
metric: sortAs(metricNames),
}}
tableOptions={{
clickRowHeaderCallback: toggleFilter,
clickColumnHeaderCallback: toggleFilter,
colTotals,
rowTotals,
highlightHeaderCellsOnHover: emitFilter,
highlightedHeaderCells: selectedFilters,
omittedHighlightHeaderGroups: [METRIC_KEY],
cellColorFormatters: { [METRIC_KEY]: metricColorFormatters },
dateFormatters,
}}
subtotalOptions={{
colSubtotalDisplay: { displayOnTop: colSubtotalPosition },
rowSubtotalDisplay: { displayOnTop: rowSubtotalPosition },
arrowCollapsed: <PlusSquareOutlined style={iconStyle} />,
arrowExpanded: <MinusSquareOutlined style={iconStyle} />,
}}
namesMapping={verboseMap}
/>
</PivotTableWrapper>
</Styles>
);
}

1 comment on commit 1aad2d1

@vercel
Copy link

@vercel vercel bot commented on 1aad2d1 Aug 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.