@gravityforms/components/html/admin/modules/Table/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

export const createTable = ( {
	data = {},
	outerBorder = true,
	responsive = false,
} ) => {
	const classes = [ 'gform-table' ];

	if ( responsive ) {
		classes.push( 'gform-table--responsive' );
	}

	if ( ! outerBorder ) {
		classes.push( 'gform-table--no-outer-border' );
	}

	const tableClasses = classes.join( ' ' );
	let thead = '';
	let tbody = '';

	if ( data?.thead ) {
		thead += '<thead><tr>';
		thead += data.thead.map( ( entry ) => `<th scope="${ entry.scope }">${ entry.content }</th>` ).join( '' );
		thead += '</tr></thead>';
	}

	if ( data?.tbody ) {
		tbody += '<tbody>';
		tbody += data.tbody.map( ( row ) => `<tr>${ row.map( ( entry ) => `<td data-header="${ entry.header }">${ entry.content }</td>` ).join( '' ) }</tr>` ).join( '' );
		tbody += '</tbody>';
	}

	return `<table class="${ tableClasses }">
		${ thead }
		${ tbody }
	</table>`;
};

export default createTable;