react-base-table
react-base-table copied to clipboard
Autodesk
Display issues with frozen and Detail View
the example https://autodesk.github.io/react-base-table/examples/detail-view
How to solve the display problem caused by using both frozen column and detail view
`const columns = generateColumns(10) columns[0].frozen = 'left'
const data = generateData(columns, 200)
console.log(columns)
data.forEach(x => {
x.children = [
{
id: ${x.id}-detail,
content: faker.lorem.paragraphs(),
},
]
})
const GlobalStyle = createGlobalStyle` .BaseTable__row--depth-0 { height: 50px; }
.BaseTable__row--depth-0 .BaseTable__row-cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } `
const Row = styled.divpadding: 15px;
const rowRenderer = ({ rowData, cells }) => {
if (rowData.content) return <Row>{rowData.content}</Row>
return cells
}
export default () => ( <> <GlobalStyle /> <Table expandColumnKey={columns[0].key} estimatedRowHeight={50} columns={columns} data={data} rowRenderer={rowRenderer} fixed /> </> ) `