<template lang="pug">
table.u-table-unstyled.w-full.text-base
    thead
        tr
            td.border.bg-primary.text-white.p-4(
                v-for="(cell, index) in headerItems"
                :key="`thead-td-${index}`"
            ) {{ cell }}
    tbody
        tr(
            v-for="(row, index) in tableMatrix"
            :key="`tbody-tr-${index}`"
        )
            td.border.p-4(
                v-for="(cell, index) in row"
                :key="`tbody-td-${index}`"
            ) {{ cell }}

</template>

<script>
export default {
	props: {
		/**
		 * thead row of the table
		 * *  e.g.
		 *     ['tbhead 1, head row', 'cell 2, row 1', 'cell 3, row 1']
		 */
		headerItems: {
			type: Array,
			default: () => [],
		},
		/**
		 * Table data arranged in a dimensional array
		 *  e.g.
		 * [
		 *     ['cell 1, row 1', 'cell 2, row 1', 'cell 3, row 1'],
		 *     ['cell 1, row 2', 'cell 2, row 2', 'cell 3, row 2'],
		 *     ['cell 1, row 3', 'cell 2, row 3', 'cell 3, row 3']
		 * ]
		 */

		tableMatrix: {
			type: Array,
			default: () => [],
		},
	},
}
</script>
<docs>
```jsx
const headerItems = ['header cell 1', 'header cell 2', 'header cell 3']
const tableMatrix = 
[
    ['cell 1, row 1', 'cell 2, row 1', 'cell 3, row 1'],
    ['cell 1, row 2', 'cell 2, row 2', 'cell 3, row 2'],
    ['cell 1, row 3', 'cell 2, row 3', 'cell 3, row 3']
]

<Table 
    :headerItems="headerItems"
    :tableMatrix="tableMatrix"
/>


```
</docs>
