JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta http-equiv="Content-Language" content="en">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.22/vue.global.min.js" ></script>
	<script type="text/javascript" src="https://unpkg.com/primevue/umd/primevue.min.js" ></script>
    <link rel="stylesheet" href="pdatatable.css" />
</head>
<body class="default" data-timeout="0">
    <div id="app">
        <p-datatable :value="products" :paginator="true" :paginator="true" :rows="rows" :rowsPerPageOptions="rowsPerPageOptions">
            <p-column field="code" header="Code"></p-column>
            <p-column field="name" header="Name"></p-column>
            <p-column field="category" header="Category"></p-column>
            <p-column field="quantity" sortable header="Quantity"></p-column>
            <p-column field="price" sortable header="Price"></p-column>
            <p-column field="supplier" header="Supplier"></p-column>
            <p-column field="inStock" header="In Stock"></p-column>
            <p-column field="reorderLevel" header="Reorder Level"></p-column>
        </p-datatable>
    </div>

</body>
</html>

CSS

:root {
  --grid-header-bdr: 1px solid #6982a6;
  --grid-header-clr: #ffffff;
  --grid-header-bg-clr: #7a93b6;
  --grid-header-alt-bg-clr: #728bae;
  --grid-row-bdr: 1px solid #eeeeee;
  --grid-row-bg-clr: #ffffff;
  --grid-row-alt-bg-clr: rgba(0, 0, 0, 0.02);
  --grid-total-value-bg-clr: #f4fbff;
  --grid-total-value-clr: var(--text-clr);
  --grid-total-value-bdr: 1px solid #e3e9f1;
  --grid-header-text-shadow: 0px 0px 2px rgba(46, 68, 98, 0.8);
}
body {
  background-color: #ffffff;
}
.p-datatable .p-datatable-table {
  flex: 1;
  position: relative;
  margin: 0;
  margin-bottom: 10px;
  border-spacing: 0;
  border-collapse: collapse !important;
  min-width: 100%;
}
.p-datatable .p-datatable-table tr:nth-child(odd) {
  background-color: var(--grid-row-alt-bg-clr);
}
.p-datatable .p-datatable-table tr th {
  background-color: var(--grid-header-bg-clr);
  border: var(--grid-header-bdr);
  padding: 8px 12px;
  text-align: left;
  line-height: 1rem;
  font-size: 1rem;
  user-select: none;
  color: var(--grid-header-clr);
  text-shadow: var(--grid-header-text-shadow);
  min-width: fit-content;
  font-weight: 600;
}
.p-datatable .p-datatable-table tr th > div {
  display: flex;
  justify-content: space-between;
}
.p-datatable .p-datatable-table tr th.p-datatable-sortable-column {
  cursor: pointer;
}
.p-datatable .p-datatable-table tr th.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
  background-color: var(--grid-header-hover-bg-clr);
}
.p-datatable .p-datatable-table tr th:nth-child(odd) {
  background-color: var(--grid-header-alt-bg-clr);
}
.p-datatable .p-datatable-table tr td {
  border: var(--grid-row-bdr) !important;
  border-top: none !important;
  padding: 8px 12px !important;
  line-height: 1rem !important;
  font-size: 0.8rem !important;
}
.p-datatable .p-datatable-table tr td:nth-child(odd) {
  background-color: var(--grid-row-alt-bg-clr);
}
.p-datatable .p-datatable-table...

JavaScript

let app = Vue.createApp({
        data() {
            return {
                message: 'Hello Vue!',
                date: new Date(),
                rows: 7,
                rowsPerPageOptions: [5, 10, 20, 50],
                products: [
                    { code: 'P001', name: 'Widget A', category: 'Gadgets', quantity: 120, price: 9.99, supplier: 'Acme Co', inStock: true, reorderLevel: 20 },
                    { code: 'P002', name: 'Widget B', category: 'Gadgets', quantity: 75, price: 14.5, supplier: 'Beta Supplies', inStock: true, reorderLevel: 15 },
                    { code: 'P003', name: 'Thingamajig', category: 'Tools', quantity: 200, price: 4.25, supplier: 'ToolCorp', inStock: true, reorderLevel: 50 },
                    { code: 'P004', name: 'Doohickey', category: 'Accessories', quantity: 0, price: 2.99, supplier: 'PartsPlus', inStock: false, reorderLevel: 30 },
                    { code: 'P005', name: 'Gizmo', category: 'Electronics', quantity: 45, price: 29.95, supplier: 'ElectroMart', inStock: true, reorderLevel: 10 },
                    { code: 'P006', name: 'Contraption', category: 'Hardware', quantity: 10, price: 49.99, supplier: 'Machina', inStock: true, reorderLevel: 5 },
                    { code: 'P007', name: 'Apparatus', category: 'Instruments', quantity: 5, price: 99.99, supplier: 'InstruTech', inStock: true, reorderLevel: 2 },
                    { code: 'P008', name: 'Device', category: 'Gadgets', quantity: 150, price: 19.99, supplier: 'GadgetWorld', inStock: true, reorderLevel: 25 },
                    { code: 'P009', name: 'Machine', category: 'Machinery', quantity: 20, price: 199.99, supplier: 'HeavyDuty', inStock: true, reorderLevel: 5 },
                    { code: 'P010', name: 'Instrument', category: 'Instruments', quantity: 0, price: 149.99, supplier: 'InstruTech', inStock: false, reorderLevel: 10 },
                    { code: 'P011', name: 'Gadget', category: 'Gadgets', quantity: 80, price: 24.99,...