import { arrayToClassName } from '../utils/utils';
import Table from 'elementor-app/ui/table/table';
export default function DataTable( {
className,
onSelect,
initialSelected,
initialDisabled,
headers,
layout,
rows,
selection,
} ) {
return (
<Table
selection={ selection }
onSelect={ onSelect }
initialSelected={ initialSelected }
initialDisabled={ initialDisabled }
className={ arrayToClassName( [ 'e-app-data-table', className ] ) }
>
{
! ! headers.length &&
<Table.Head>
<Table.Row>
{
selection &&
<Table.Cell tag="th">
<Table.Checkbox allSelectedCount={ rows.length } />
</Table.Cell>
}
{
headers.map( ( header, index ) => (
<Table.Cell tag="th" colSpan={ layout && layout[ index ] } key={ index }>
{ header }
</Table.Cell>
) )
}
</Table.Row>
</Table.Head>
}
<Table.Body>
{
rows.map( ( row, rowIndex ) => (
<Table.Row key={ rowIndex }>
{
selection &&
<Table.Cell tag="td">
<Table.Checkbox index={ rowIndex } />
</Table.Cell>
}
{
row.map( ( cell, cellIndex ) => (
<Table.Cell tag="td" colSpan={ layout && layout[ cellIndex ] } key={ cellIndex }>
{ cell }
</Table.Cell>
) )
}
</Table.Row>
) )
}
</Table.Body>
</Table>
);
}
DataTable.propTypes = {
className: PropTypes.string,
headers: PropTypes.array,
rows: PropTypes.array,
initialDisabled: PropTypes.array,
initialSelected: PropTypes.array,
layout: PropTypes.array,
onSelect: PropTypes.func,
selection: PropTypes.bool,
withHeader: PropTypes.bool,
};
DataTable.defaultProps = {
className: '',
headers: [],
rows: [],
initialDisabled: [],
initialSelected: [],
selection: false,
};