| 1 |
import { arrayToClassName } from '../utils/utils'; |
| 2 |
|
| 3 |
import Table from 'elementor-app/ui/table/table'; |
| 4 |
|
| 5 |
export default function DataTable( { |
| 6 |
className, |
| 7 |
onSelect, |
| 8 |
initialSelected, |
| 9 |
initialDisabled, |
| 10 |
headers, |
| 11 |
layout, |
| 12 |
rows, |
| 13 |
selection, |
| 14 |
} ) { |
| 15 |
return ( |
| 16 |
<Table |
| 17 |
selection={ selection } |
| 18 |
onSelect={ onSelect } |
| 19 |
initialSelected={ initialSelected } |
| 20 |
initialDisabled={ initialDisabled } |
| 21 |
className={ arrayToClassName( [ 'e-app-data-table', className ] ) } |
| 22 |
> |
| 23 |
{ |
| 24 |
! ! headers.length && |
| 25 |
<Table.Head> |
| 26 |
<Table.Row> |
| 27 |
{ |
| 28 |
selection && |
| 29 |
<Table.Cell tag="th"> |
| 30 |
<Table.Checkbox allSelectedCount={ rows.length } /> |
| 31 |
</Table.Cell> |
| 32 |
} |
| 33 |
|
| 34 |
{ |
| 35 |
headers.map( ( header, index ) => ( |
| 36 |
<Table.Cell tag="th" colSpan={ layout && layout[ index ] } key={ index }> |
| 37 |
{ header } |
| 38 |
</Table.Cell> |
| 39 |
) ) |
| 40 |
} |
| 41 |
</Table.Row> |
| 42 |
</Table.Head> |
| 43 |
} |
| 44 |
|
| 45 |
<Table.Body> |
| 46 |
{ |
| 47 |
rows.map( ( row, rowIndex ) => ( |
| 48 |
<Table.Row key={ rowIndex }> |
| 49 |
{ |
| 50 |
selection && |
| 51 |
<Table.Cell tag="td"> |
| 52 |
<Table.Checkbox index={ rowIndex } /> |
| 53 |
</Table.Cell> |
| 54 |
} |
| 55 |
|
| 56 |
{ |
| 57 |
row.map( ( cell, cellIndex ) => ( |
| 58 |
<Table.Cell tag="td" colSpan={ layout && layout[ cellIndex ] } key={ cellIndex }> |
| 59 |
{ cell } |
| 60 |
</Table.Cell> |
| 61 |
) ) |
| 62 |
} |
| 63 |
</Table.Row> |
| 64 |
) ) |
| 65 |
} |
| 66 |
</Table.Body> |
| 67 |
</Table> |
| 68 |
); |
| 69 |
} |
| 70 |
|
| 71 |
DataTable.propTypes = { |
| 72 |
className: PropTypes.string, |
| 73 |
headers: PropTypes.array, |
| 74 |
rows: PropTypes.array, |
| 75 |
initialDisabled: PropTypes.array, |
| 76 |
initialSelected: PropTypes.array, |
| 77 |
layout: PropTypes.array, |
| 78 |
onSelect: PropTypes.func, |
| 79 |
selection: PropTypes.bool, |
| 80 |
withHeader: PropTypes.bool, |
| 81 |
}; |
| 82 |
|
| 83 |
DataTable.defaultProps = { |
| 84 |
className: '', |
| 85 |
headers: [], |
| 86 |
rows: [], |
| 87 |
initialDisabled: [], |
| 88 |
initialSelected: [], |
| 89 |
selection: false, |
| 90 |
}; |
| 91 |
|
| 92 |
|
