Notes

import React from 'react';
import Table from 'react-virtualized/dist/es/Table/Table';
import Column from 'react-virtualized/dist/es/Table/Column';
import defaultTableRowRenderer from 'react-virtualized/dist/es/Table/defaultRowRenderer';
import CellMeasurer from 'react-virtualized/dist/es/CellMeasurer/CellMeasurer';
import CellMeasurerCache from 'react-virtualized/dist/es/CellMeasurer/CellMeasurerCache';
import shouldComponentUpdate from '../utils/shouldComponentUpdate';

import 'react-virtualized/styles.css';
import '../sass/components/react-virtualized-table.scss';

export default class CollapsableTable extends React.Component {
static defaultProps = {
noResultsText: 'Your search yielded no results.'
};

constructor(props) {
super(props);
const {defaultSorted} = props;
this.state = {
sortBy: defaultSorted?.[0]?.id,
sortDirection: !defaultSorted ? undefined : defaultSorted?.[0]?.desc ? 'DESC' : 'ASC',
subComponentRows: {},
expandedRows: new Set()
};
this.cache = new CellMeasurerCache({
defaultHeight: 44,
defaultWidth: 150,
fixedWidth: true
});
this.shouldComponentUpdate = shouldComponentUpdate.bind(this);
}

getState = () => this.state;

resetCache = () => {
this.cache.clearAll();
};

componentDidMount() {
this.resetCache();
}

static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.onSortChange) return {...prevState, sortBy: nextProps.sortBy, sortDirection: nextProps.sortDirection};
return prevState;
}

onRowClick = ({event, index}) => {
this.toggleExpandAll(index);
if (this.props.SubComponent) {
let newRows = {...this.state.subComponentRows};
if (index in newRows) delete newRows[index];
else newRows[index] = '';
this.resetCache();
this.setState({
subComponentRows: newRows
});
}
};

closeSubComponents = () => {
if (Object.keys(this.state.subComponentRows).length > 0) {
this.resetCache();
this.setState({
subComponentRows: {}
});
}
};


rowRenderer = props => {
const {index, style, key, rowData} = props,
{SubComponent} = this.props;

const isExpanded = this.state.expandedRows.has(index);
let content = defaultTableRowRenderer(props)
if (isExpanded) {

const expandedContent = (
<div style={{ background: '#eee' }}>Expanded Content for row {index}</div>
);
content = (
<div key={key} style={style}>
{content}
{expandedContent}
</div>
);
}


if (index in this.state.subComponentRows)
return (
<CellMeasurer
cache={this.cache}
key={key}
parent={this.table ? this.table.Grid : undefined}
columnIndex={0}
rowIndex={index}
>
<div style={{...style, borderTop: '1px solid #d2d2d7', overflow: 'visible', height: 'auto'}} key={key}>
{defaultTableRowRenderer({...props, style: {}})}
<div className="sub-component-row">
{typeof SubComponent === 'function' ? SubComponent({original: rowData, rowData}) : SubComponent}
</div>
</div>
</CellMeasurer>
);
return (
<CellMeasurer
cache={this.cache}
key={key}
parent={this.table ? this.table.Grid : undefined}
columnIndex={0}
rowIndex={index}
>
{defaultTableRowRenderer(props)}
</CellMeasurer>
);
};
toggleExpandAll=(index)=>{
this.setState(prevState =>{
const expandedRows = new Set(prevState.expandedRows);
if(expandedRows.has(index)) {
expandedRows.delete(index);
}else{
expandedRows.add(index);
}
return {expandedRows}
})
}

render() {
const {
className,
columns,
data,
height,
noResultsText,
width,
tableProps = {},
showNoResultsEmptyTable,
globalFilter,
manualSort
} = this.props,
{sortDirection, sortBy, subComponentRows,expandedRows} = this.state;
let autoWidth = width,
remainWidth = autoWidth,
fixedColumns = 0;
columns.forEach(column => {
if (column.width) {
remainWidth -= column.width;
fixedColumns += 1;
}
});
const isExpanded = expandedRows.size >0
let tableRows = data;
if (sortBy && !manualSort) {
const sortMethod =
columns?.find?.(column => !column.hideColumn && !column.disableSort && column.accessor === sortBy)
?.sortMethod || null;
tableRows = data.slice().sort((a, b) => {
if (sortMethod) return sortMethod(a, b);
let aStr = typeof a[sortBy] === 'object' ? JSON.stringify(a[sortBy]) : a[sortBy] || 'zzzz',
bStr = typeof b[sortBy] === 'object' ? JSON.stringify(b[sortBy]) : b[sortBy] || 'zzzz';
if (typeof aStr === 'string' && typeof bStr === 'string') {
if (aStr.toLowerCase() > bStr.toLowerCase()) return 1;
return -1;
} else if (aStr > bStr) return 1;
return -1;
});
if (sortDirection === 'DESC') tableRows = tableRows.reverse();
}
if (!tableRows.length && !showNoResultsEmptyTable)
return <h3 className="no-results-text global-header-mega">{noResultsText}</h3>;

return (
<Table
ref={ref => {
this.table = ref;
}}
className={`${className} brucke-react-virtualized-table`}
rows={tableRows}
rowCount={tableRows.length}
rowHeight={this.cache.rowHeight}
width={isNaN(autoWidth) ? 0 : autoWidth}
rowRenderer={this.rowRenderer}
height={height}
rowGetter={({index}) => tableRows[index]}
cellMeasurerCache={this.cache}
onRowClick={this.onRowClick}
autoHeight={tableRows.length > 0 && tableRows.length * 50 < height}
{...tableProps}
rowClassName={
tableProps.rowClassName ? obj => tableProps.rowClassName({...obj, row: tableRows[obj.index]}) : null
}
>
{columns.filter(item => !item.hideColumn).map((column, i) => (
<Column
{...column}
dataKey={column.accessor}
key={`${column.accessor}-${i}`}
label={column.Header}
width={column.width || remainWidth / (columns.length - fixedColumns)}
headerRenderer={

typeof column.Header === 'function'
? ({columnData}) => column.Header({value: columnData})
: ({dataKey, label}) => (
<>
<div
className={`virtualized-header${sortBy === dataKey && !!dataKey ? ' sorted' : ''} ${
column.disableSort ? ' disabled' : ''
}`}
onClick={() => {
if (!column.disableSort) {
this.resetCache();
if (this.props.onSortChange)
this.props.onSortChange({
sortBy: dataKey,
sortDirection: sortBy === dataKey && sortDirection === 'ASC' ? 'DESC' : 'ASC'
});
else
this.setState({
sortBy: dataKey,
sortDirection: sortBy === dataKey && sortDirection === 'ASC' ? 'DESC' : 'ASC'
});
}
}}
>
<span
className={`${
sortBy === dataKey && !!dataKey ? 'global-link-medium-bold' : 'global-header-medium'
}`}
>
{sortBy === dataKey &&
!!dataKey && (
<span className={`apple-icons ac-icon-sort-${sortDirection === 'ASC' ? 'down' : 'up'}`} />
)}
<span>{label}</span>

</span>

</div>
<span className={`icon icon-chevron${isExpanded ? 'up' : 'down'}`} onClick={()=>this.toggleExpandAll()} />
</>
)
}
disableSort={column.disableSort}
cellRenderer={obj => {
const {cellData, rowData, rowIndex} = obj;
return (
<div className="text-wrap global-body">
{column.Cell
? column.Cell(
{
...obj,
value: cellData,
row: {...rowData, _original: rowData},
globalFilter: globalFilter,
isExpanded: rowIndex in subComponentRows,
column: {
...column,
id: column.accessor
}
},
rowData
)
: cellData}
</div>
);
}}
/>
))}
</Table>
);
}
}