Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 2x 2x 26x | <template>
<div>
<DataTable
:key="randomId"
:value="value"
:columns="columns"
:color="color"
:size="size"
:sortable="sortable"
:content="content"
v-bind="$attrs"
/>
<div v-if="value.length === 0">
{{ emptyMessage }}
</div>
</div>
</template>
<script setup>
import generateRandomId from '@atomic-ui/../utils/randomNumber';
import DataTable from '@atomic-ui/dataTable';
defineProps({
value: {
type: Array,
required: true,
},
columns: {
type: Array,
required: true,
},
color: {
type: String,
default: 'white',
},
size: {
type: String,
default: 'small',
},
sortable: {
type: Boolean,
default: true,
},
content: {
type: String,
default: 'plain',
},
emptyMessage: {
type: String,
default: 'No data found.',
},
});
const randomId = generateRandomId();
</script>
<style lang="scss" scoped>
:deep .p-datatable .p-datatable-tbody > tr:nth-child(even) {
background: $background-color;
}
:deep .p-datatable .p-sortable-column .p-column-header-content .p-column-title {
text-decoration: none;
}
</style>
|