feat(AnalyticalTable): add experimental feature to determine column widths based on content #295
Conversation
vbersch
changed the title
|
|
||
| export const defaultTable = () => { | ||
| const renderTable = () => { | ||
| // const innerData = generateData(200); |
There was a problem hiding this comment.
please remove
| // const innerData = generateData(200); |
| const dataTree = generateData(20, true); | ||
|
|
||
| export const defaultTable = () => { | ||
| const renderTable = () => { |
There was a problem hiding this comment.
can you please export this story again and remove the new export you have creating? having these nested component demos is breaking our storybook:
|
|
||
| const makeEntry = () => ({ | ||
| name: getRandomName(), | ||
| longColumn: 'Really really long column content... don´t crop please', |
There was a problem hiding this comment.
can you add the long column to the treeTableData as well? otherwise this column is always empty. Or change the columns for the treeTable back to the old config.
|
|
||
| const classes = useStyles({ rowHeight: props.rowHeight }); | ||
| const [internalRows, setInternalRows] = useState([]); | ||
| const [hiddenColumns, setHiddenColumns] = useState([]); |
There was a problem hiding this comment.
Do we really need this shadow on the hidden columns? can't we just call useDynamicColumnWidths after useTable and use the columns from the tableState?
| } = props; | ||
|
|
||
| const classes = useStyles({ rowHeight: props.rowHeight }); | ||
| const [internalRows, setInternalRows] = useState([]); |
There was a problem hiding this comment.
do we really need that? why not using the rows from the table direclty?
| const updateTableClientWidth = useCallback(() => { | ||
| requestAnimationFrame(() => { | ||
| if (tableRef.current) { | ||
| setTableClientHeight(tableRef.current.clientWidth); |
There was a problem hiding this comment.
clientHeight === clientWidth?
| charLength < 15 ? Math.sqrt(charLength * 1500) : 8 * charLength; | ||
| const approximateContentPxFromCharLength = (charLength) => 8 * charLength; | ||
|
|
||
| export const useDynamicColumnWidths = (scaleWidthMode, columns, rows, totalWidth, hiddenColumns, setColumnWidth) => { |
There was a problem hiding this comment.
can we run this as a tableHook? just the our useXYZStyle hooks? then we would have access to all table data like columns, row, width, hidden columns, etc...
# Conflicts: # packages/main/src/components/AnalyticalTable/index.tsx
MarcusNotheis
left a comment
MarcusNotheis
left a comment
There was a problem hiding this comment.
There are two code snippets that can be removed in my opinion.
Could you please run prettier on these files before merging? looks like the pre-commit hook did not run.
Other than that looks good 🚢
| export const defaultTable = () => { | ||
| return ( | ||
| <div style={{ display: 'flex', flexDirection: 'column' }}> | ||
| {' '} |
There was a problem hiding this comment.
I guess we can remove that line?
| } = props; | ||
|
|
||
| const classes = useStyles({ rowHeight: props.rowHeight }); | ||
| // const [tableClientWidth, setTableClientWidth] = useState(0); |
…AP/ui5-webcomponents-react into feat/experimental-dynamic-table-widths
No description provided.