mirror of
https://github.com/gosticks/react-table.git
synced 2026-08-19 16:30:21 +00:00
51 lines
1.1 KiB
JavaScript
51 lines
1.1 KiB
JavaScript
export function useFlexLayout(hooks) {
|
|
hooks.getTableBodyProps.push((props, instance) => [
|
|
props,
|
|
{
|
|
style: {
|
|
minWidth: `${instance.totalColumnsWidth}px`,
|
|
},
|
|
},
|
|
])
|
|
|
|
const getRowStyles = (props, instance) => [
|
|
props,
|
|
{
|
|
style: {
|
|
display: 'flex',
|
|
flex: '1 0 auto',
|
|
minWidth: `${instance.totalColumnsMinWidth}px`,
|
|
},
|
|
},
|
|
]
|
|
|
|
hooks.getRowProps.push(getRowStyles)
|
|
hooks.getHeaderGroupProps.push(getRowStyles)
|
|
|
|
hooks.getHeaderProps.push((props, instance, header) => [
|
|
props,
|
|
{
|
|
style: {
|
|
boxSizing: 'border-box',
|
|
flex: `${header.totalWidth} 0 auto`,
|
|
minWidth: `${header.totalMinWidth}px`,
|
|
width: `${header.totalWidth}px`,
|
|
},
|
|
},
|
|
])
|
|
|
|
hooks.getCellProps.push((props, instance, cell) => [
|
|
props,
|
|
{
|
|
style: {
|
|
boxSizing: 'border-box',
|
|
flex: `${cell.column.totalWidth} 0 auto`,
|
|
minWidth: `${cell.column.totalMinWidth}px`,
|
|
width: `${cell.column.totalWidth}px`,
|
|
},
|
|
},
|
|
])
|
|
}
|
|
|
|
useFlexLayout.pluginName = 'useFlexLayout'
|