I have the follwing:
<Panel header="SITE MANAGEMENT">
<template #icons>
<Button severity="secondary" rounded text @click="showAddNewModal = true">
<template #icon>
<LucideIcon name="Plus" />
</template>
</Button>
<Button severity="secondary" rounded text @click="loadSites">
<template #icon>
<LucideIcon name="RefreshCw" />
</template>
</Button>
</template>
<DataTable ref="dataTable" :value="tableData" paginator :rows="50" :loading="loadingSiteData">
<Column field="siteName" header="Name" />
<Column field="siteIdentifier" header="Identifier" />
<Column field="averageScanAccuracyForCurrentMonth" header="Scan Accuracy">
<template #body="slotProps">
{{ slotProps.data.averageScanAccuracyForCurrentMonth }}%
</template>
</Column>
<Column header="Actions" headerClass="flex justify-end">
<template #body="slotProps">
<div class="flex justify-end">
<Button severity="danger" rounded text @click="deleteRecord(slotProps.data)">
<template #icon>
<LucideIcon name="Trash2" />
</template>
</Button>
</div>
</template>
</Column>
<template #empty>
<NoDataInTableComponent />
</template>
</DataTable>
</Panel>
When I try it on Mobile size screens, I get:
Even if i add "scrollable", it wont give me horizontal scrollers for the DataTable. How can I solve this?
