mirror of https://github.com/apache/superset.git
feat: truncate long values in table viz, a per-column setting (#19383)
* feat: truncate long values, a per-column setting * fix: lint * fix: removed width for column control * fix: removed truncate option for time, bool, and numeric columns * prevent extra div if not truncating
This commit is contained in:
parent
ac01a1b02f
commit
7e504ff680
|
@ -40,6 +40,7 @@ export type SharedColumnConfigProp =
|
||||||
| 'd3SmallNumberFormat'
|
| 'd3SmallNumberFormat'
|
||||||
| 'd3TimeFormat'
|
| 'd3TimeFormat'
|
||||||
| 'horizontalAlign'
|
| 'horizontalAlign'
|
||||||
|
| 'truncateLongCells'
|
||||||
| 'showCellBars';
|
| 'showCellBars';
|
||||||
|
|
||||||
const emitTarget: ControlFormItemSpec<'Input'> = {
|
const emitTarget: ControlFormItemSpec<'Input'> = {
|
||||||
|
@ -142,6 +143,14 @@ const colorPositiveNegative: ControlFormItemSpec<'Checkbox'> = {
|
||||||
debounceDelay: 200,
|
debounceDelay: 200,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const truncateLongCells: ControlFormItemSpec<'Checkbox'> = {
|
||||||
|
controlType: 'Checkbox',
|
||||||
|
label: t('Truncate Cells'),
|
||||||
|
description: t('Truncate long cells to the "min width" set above'),
|
||||||
|
defaultValue: false,
|
||||||
|
debounceDelay: 400,
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* All configurable column formatting properties.
|
* All configurable column formatting properties.
|
||||||
*/
|
*/
|
||||||
|
@ -159,6 +168,7 @@ export const SHARED_COLUMN_CONFIG_PROPS = {
|
||||||
d3TimeFormat,
|
d3TimeFormat,
|
||||||
fractionDigits,
|
fractionDigits,
|
||||||
columnWidth,
|
columnWidth,
|
||||||
|
truncateLongCells,
|
||||||
horizontalAlign,
|
horizontalAlign,
|
||||||
showCellBars,
|
showCellBars,
|
||||||
alignPositiveNegative,
|
alignPositiveNegative,
|
||||||
|
@ -175,6 +185,7 @@ export const DEFAULT_CONFIG_FORM_LAYOUT: ColumnConfigFormLayout = {
|
||||||
'columnWidth',
|
'columnWidth',
|
||||||
{ name: 'horizontalAlign', override: { defaultValue: 'left' } },
|
{ name: 'horizontalAlign', override: { defaultValue: 'left' } },
|
||||||
],
|
],
|
||||||
|
['truncateLongCells'],
|
||||||
],
|
],
|
||||||
[GenericDataType.NUMERIC]: [
|
[GenericDataType.NUMERIC]: [
|
||||||
[
|
[
|
||||||
|
|
|
@ -82,6 +82,17 @@ export default styled.div`
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dt-truncate-cell {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.dt-truncate-cell:hover {
|
||||||
|
overflow: visible;
|
||||||
|
white-space: normal;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.dt-pagination {
|
.dt-pagination {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
/* use padding instead of margin so clientHeight can capture it */
|
/* use padding instead of margin so clientHeight can capture it */
|
||||||
|
|
|
@ -341,6 +341,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
|
||||||
? defaultColorPN
|
? defaultColorPN
|
||||||
: config.colorPositiveNegative;
|
: config.colorPositiveNegative;
|
||||||
|
|
||||||
|
const { truncateLongCells } = config;
|
||||||
|
|
||||||
const hasColumnColorFormatters =
|
const hasColumnColorFormatters =
|
||||||
isNumeric &&
|
isNumeric &&
|
||||||
Array.isArray(columnColorFormatters) &&
|
Array.isArray(columnColorFormatters) &&
|
||||||
|
@ -411,12 +413,37 @@ export default function TableChart<D extends DataRecord = DataRecord>(
|
||||||
].join(' '),
|
].join(' '),
|
||||||
};
|
};
|
||||||
if (html) {
|
if (html) {
|
||||||
|
if (truncateLongCells) {
|
||||||
|
// eslint-disable-next-line react/no-danger
|
||||||
|
return (
|
||||||
|
<StyledCell {...cellProps}>
|
||||||
|
<div
|
||||||
|
className="dt-truncate-cell"
|
||||||
|
style={columnWidth ? { width: columnWidth } : undefined}
|
||||||
|
dangerouslySetInnerHTML={html}
|
||||||
|
/>
|
||||||
|
</StyledCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
// eslint-disable-next-line react/no-danger
|
// eslint-disable-next-line react/no-danger
|
||||||
return <StyledCell {...cellProps} dangerouslySetInnerHTML={html} />;
|
return <StyledCell {...cellProps} dangerouslySetInnerHTML={html} />;
|
||||||
}
|
}
|
||||||
// If cellProps renderes textContent already, then we don't have to
|
// If cellProps renderes textContent already, then we don't have to
|
||||||
// render `Cell`. This saves some time for large tables.
|
// render `Cell`. This saves some time for large tables.
|
||||||
return <StyledCell {...cellProps}>{text}</StyledCell>;
|
return (
|
||||||
|
<StyledCell {...cellProps}>
|
||||||
|
{truncateLongCells ? (
|
||||||
|
<div
|
||||||
|
className="dt-truncate-cell"
|
||||||
|
style={columnWidth ? { width: columnWidth } : undefined}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
text
|
||||||
|
)}
|
||||||
|
</StyledCell>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
Header: ({ column: col, onClick, style, onDragStart, onDrop }) => (
|
Header: ({ column: col, onClick, style, onDragStart, onDrop }) => (
|
||||||
<th
|
<th
|
||||||
|
|
Loading…
Reference in New Issue