# elementor/3.8.0-beta1/app/assets/js/molecules/data-table.js

Elementor Website Builder – more than just a page builder, version 3.8.0-beta1. 92 lines.

- Page: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/molecules/data-table.js
- Raw: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/raw/app/assets/js/molecules/data-table.js
- Modified: 2022-09-19T16:26:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/molecules/data-table.js#L10-L20`.

```javascript
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,
};


```