{table.getHeaderGroups().map((headerGroup) => (
{headerGroup.headers.map((header) => (
{flexRender(header.column.columnDef.header, header.getContext())}
{header.column.getCanSort() && header.column.getIsSorted() &&
{header.column.getIsSorted() == 'desc' ?
: }
}
{header.column.getCanResize() && (
header.column.resetSize()}
onMouseDown={header.getResizeHandler()}
onTouchStart={header.getResizeHandler()}
className='pgrt-header-resizer'
/>
)}
))}
))}
);
}
PgReactTableHeader.propTypes = {
table: PropTypes.object,
};
export function PgReactTableBody({children, style}) {
return (
{children}
);
}
PgReactTableBody.propTypes = {
style: PropTypes.object,
children: CustomPropTypes.children,
};
export const PgReactTable = forwardRef(({children, table, rootClassName, tableClassName, onScrollFunc, ...props}, ref)=>{
const columns = table.getAllColumns();
useEffect(()=>{
const setMaxExpandWidth = ()=>{
if(ref.current) {
ref.current.style['--expand-width'] = (ref.current.getBoundingClientRect().width ?? 430) - 30; //margin,scrollbar,etc.
}
};
const tableResizeObserver = new ResizeObserver(()=>{
setMaxExpandWidth();
});
tableResizeObserver.observe(ref.current);
}, []);
const columnSizeVars = React.useMemo(() => {
const headers = table.getFlatHeaders();
const colSizes = {};
for (let value of headers) {
const header = value;
colSizes[`--header-${header.id.replace(/\W/g, '_')}-size`] = header.getSize();
colSizes[`--col-${header.column.id.replace(/\W/g, '_')}-size`] = header.column.getSize();
}
return colSizes;
}, [columns, table.getState().columnSizingInfo]);
return (
onScrollFunc?.(e.target)}>
{children}
);
});
PgReactTable.displayName = 'PgReactTable';
PgReactTable.propTypes = {
table: PropTypes.object,
rootClassName: PropTypes.any,
tableClassName: PropTypes.any,
children: CustomPropTypes.children,
onScrollFunc: PropTypes.any,
};
export function getExpandCell({ onClick, title }) {
const Cell = ({ row }) => {
const onClickFinal = (e) => {
e.preventDefault();
row.toggleExpanded();
onClick?.(row, e);
};
return (
) : (
)
}
noBorder
onClick={onClickFinal}
aria-label={title}
/>
);
};
Cell.displayName = 'ExpandCell';
Cell.propTypes = {
row: PropTypes.any,
};
return Cell;
}
export function getSwitchCell() {
const Cell = ({ getValue }) => {
return
;
};
Cell.displayName = 'SwitchCell';
Cell.propTypes = {
getValue: PropTypes.func,
};
return Cell;
}
export function getCheckboxCell({title}) {
const Cell = ({ table }) => {
return (
);
};
Cell.displayName = 'CheckboxCell';
Cell.propTypes = {
table: PropTypes.object,
};
return Cell;
}
export function getCheckboxHeaderCell({title}) {
const Cell = ({ row }) => {
return (
);
};
Cell.displayName = 'CheckboxHeaderCell';
Cell.propTypes = {
row: PropTypes.object,
};
return Cell;
}
export function getEditCell({isDisabled, title, onClick}) {
const Cell = ({ row }) => {
return
} className='pgrt-cell-button'
onClick={()=>{
onClick ? onClick(row) : row.toggleExpanded();
}} disabled={isDisabled?.(row)}
/>;
};
Cell.displayName = 'EditCell';
Cell.propTypes = {
row: PropTypes.any,
};
return Cell;
}
export function getDeleteCell({isDisabled, title, onClick}) {
const Cell = ({ row }) => (
}
onClick={()=>onClick?.(row)}
className='pgrt-cell-button' disabled={isDisabled?.(row)}
/>
);
Cell.displayName = 'DeleteCell';
Cell.propTypes = {
row: PropTypes.any,
};
return Cell;
}