give / src / EventTickets / resources / admin / components / EventDetailsPage / SectionTable / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at src/EventTickets/resources/admin/components/EventDetailsPage/SectionTable/index.tsx

53 lines 2.1 KB

Raw Download Zip

1	import {__} from '@wordpress/i18n';
2	import cx from 'classnames';
3	import styles from '../SectionTable/SectionTable.module.scss';
4
5	export default function SectionTable({tableHeaders, data, blankSlate = null, rowActions = null}) {
6	const isEmpty = data.length === 0;
7	const tableKeys = Object.keys(tableHeaders);
8
9	return (
10	<div className={styles.tableGroup}>
11	<table className={styles.table}>
12	<thead>
13	<tr>
14	{tableKeys.map((key) => (
15	<th className={cx(styles.tableColumnHeader, {[styles.idColumn]: key === 'id'})} key={key}>
16	{tableHeaders[key]}
17	</th>
18	))}
19	</tr>
20	</thead>
21	<tbody>
22	{data.map((row, index) => (
23	<tr className={styles.tableRow} key={index}>
24	{tableKeys.map((key, columnNumber) => (
25	<td className={`${styles.tableCell} ${styles[key] ?? ''}`} key={key}>
26	{key === 'id' ? <span className={styles.idBadge}>{row[key]}</span> : row[key]}
27
28	{columnNumber === 0 && rowActions && (
29	<div
30	role="group"
31	aria-label={__('Actions', 'give')}
32	className={styles.tableRowActions}
33	>
34	{rowActions(row)}
35	</div>
36	)}
37	</td>
38	))}
39	</tr>
40	))}
41	</tbody>
42	</table>
43	<div id="giveListTableMessage">
44	{isEmpty && (
45	<div role="status" className={styles.statusMessage}>
46	{blankSlate}
47	</div>
48	)}
49	</div>
50	</div>
51	);
52	}
53