mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Merged new Docs and Demos
This commit is contained in:
Cagatay Civici
parent
296cc217fb
commit
dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
|
|
@ -1,249 +1,363 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Vue Table Component</Title>
|
||||
<Meta name="description" content="DataTable displays data in tabular format" />
|
||||
</Head>
|
||||
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DataTable</h1>
|
||||
<p>DataTable displays data in tabular format.</p>
|
||||
</div>
|
||||
<AppDemoActions />
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<DataTable
|
||||
v-model:selection="selectedCustomers"
|
||||
v-model:filters="filters"
|
||||
:value="customers"
|
||||
:paginator="true"
|
||||
class="p-datatable-customers"
|
||||
:rows="10"
|
||||
dataKey="id"
|
||||
:rowHover="true"
|
||||
filterDisplay="menu"
|
||||
:loading="loading"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
:rowsPerPageOptions="[10, 25, 50]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
|
||||
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']"
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 class="m-0">Customers</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty> No customers found. </template>
|
||||
<template #loading> Loading customers data. Please wait. </template>
|
||||
<Column selectionMode="multiple" style="min-width: 3rem"></Column>
|
||||
<Column field="name" header="Name" sortable style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
|
||||
<span class="image-text">{{ data.country.name }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{ data.representative.name }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
<img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{ slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
|
||||
<template #body="{ data }">
|
||||
{{ formatDate(data.date) }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="balance" header="Balance" sortable dataType="numeric" style="min-width: 8rem">
|
||||
<template #body="{ data }">
|
||||
{{ formatCurrency(data.balance) }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" sortable :filterMenuStyle="{ width: '14rem' }" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
<span :class="'customer-badge status-' + data.status">{{ data.status }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.value">{{ slotProps.value }}</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.option">{{ slotProps.option }}</span>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
<ProgressBar :value="data.activity" :showValue="false" />
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Slider v-model="filterModel.value" range class="m-3"></Slider>
|
||||
<div class="flex align-items-center justify-content-between px-2">
|
||||
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
|
||||
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column headerStyle="min-width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
||||
<template #body>
|
||||
<Button type="button" icon="pi pi-cog"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTableDoc />
|
||||
</div>
|
||||
<DocComponent title="Vue Table Component" header="DataTable" description="DataTable displays data in tabular format." :componentDocs="docs" :apiDocs="['DataTable', 'Column', 'ColumnGroup']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FilterMatchMode, FilterOperator } from 'primevue/api';
|
||||
import CustomerService from '../../service/CustomerService';
|
||||
import DataTableDoc from './DataTableDoc';
|
||||
import AccessibilityDoc from '@/doc/datatable/AccessibilityDoc';
|
||||
import BasicDoc from '@/doc/datatable/BasicDoc';
|
||||
import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc';
|
||||
import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc';
|
||||
import ColumnGroupDoc from '@/doc/datatable/ColumnGroupDoc';
|
||||
import ColumnToggleDoc from '@/doc/datatable/ColumnToggleDoc';
|
||||
import ConditionalStyleDoc from '@/doc/datatable/ConditionalStyleDoc';
|
||||
import ContextMenuDoc from '@/doc/datatable/ContextMenuDoc';
|
||||
import DynamicColumnsDoc from '@/doc/datatable/DynamicColumnsDoc';
|
||||
import CellEditDoc from '@/doc/datatable/edit/CellEditDoc';
|
||||
import FilterSortEditDoc from '@/doc/datatable/edit/FilterSortEditDoc';
|
||||
import RowEditDoc from '@/doc/datatable/edit/RowEditDoc';
|
||||
import ExportDoc from '@/doc/datatable/ExportDoc';
|
||||
import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc';
|
||||
import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc';
|
||||
import GridLinesDoc from '@/doc/datatable/GridLinesDoc';
|
||||
import ImportDoc from '@/doc/datatable/ImportDoc';
|
||||
import LazyLoadDoc from '@/doc/datatable/LazyLoadDoc';
|
||||
import PaginatorBasicDoc from '@/doc/datatable/paginator/PaginatorBasicDoc';
|
||||
import PaginatorTemplateDoc from '@/doc/datatable/paginator/PaginatorTemplateDoc';
|
||||
import ReorderDoc from '@/doc/datatable/ReorderDoc';
|
||||
import RowExpansionDoc from '@/doc/datatable/RowExpansionDoc';
|
||||
import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDoc';
|
||||
import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc';
|
||||
import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc';
|
||||
import CheckboxRowSelectionDoc from '@/doc/datatable/rowselection/CheckboxRowSelectionDoc';
|
||||
import MultipleRowsSelectionDoc from '@/doc/datatable/rowselection/MultipleRowsSelectionDoc';
|
||||
import RadioButtonRowSelectionDoc from '@/doc/datatable/rowselection/RadioButtonRowSelectionDoc';
|
||||
import RowSelectEventsDoc from '@/doc/datatable/rowselection/RowSelectEventsDoc';
|
||||
import SingleRowSelectionDoc from '@/doc/datatable/rowselection/SingleRowSelectionDoc';
|
||||
import CustomersDoc from '@/doc/datatable/samples/CustomersDoc';
|
||||
import ProductsDoc from '@/doc/datatable/samples/ProductsDoc';
|
||||
import FlexibleScrollDoc from '@/doc/datatable/scroll/FlexibleScrollDoc';
|
||||
import FrozenColumnsDoc from '@/doc/datatable/scroll/FrozenColumnsDoc';
|
||||
import FrozenRowsDoc from '@/doc/datatable/scroll/FrozenRowsDoc';
|
||||
import HorizontalScrollDoc from '@/doc/datatable/scroll/HorizontalScrollDoc';
|
||||
import VerticalScrollDoc from '@/doc/datatable/scroll/VerticalScrollDoc';
|
||||
import SizeDoc from '@/doc/datatable/SizeDoc';
|
||||
import MultipleColumnsDoc from '@/doc/datatable/sort/MultipleColumnsDoc';
|
||||
import PresortDoc from '@/doc/datatable/sort/PresortDoc';
|
||||
import RemovableSortDoc from '@/doc/datatable/sort/RemovableSortDoc';
|
||||
import SingleColumnDoc from '@/doc/datatable/sort/SingleColumnDoc';
|
||||
import StatefulDoc from '@/doc/datatable/StatefulDoc';
|
||||
import StripedRowsDoc from '@/doc/datatable/StripedRowsDoc';
|
||||
import StyleDoc from '@/doc/datatable/StyleDoc';
|
||||
import TemplateDoc from '@/doc/datatable/TemplateDoc';
|
||||
import LazyVirtualScrollDoc from '@/doc/datatable/virtualscroll/LazyVirtualScrollDoc';
|
||||
import PreloadVirtualScrollDoc from '@/doc/datatable/virtualscroll/PreloadVirtualScrollDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customers: null,
|
||||
selectedCustomers: null,
|
||||
filters: {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
representative: { value: null, matchMode: FilterMatchMode.IN },
|
||||
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
|
||||
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
||||
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
||||
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
|
||||
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
|
||||
},
|
||||
loading: true,
|
||||
representatives: [
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
|
||||
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
|
||||
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
|
||||
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
|
||||
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
|
||||
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
|
||||
],
|
||||
statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'dynamic_columns',
|
||||
label: 'Dynamic Columns',
|
||||
component: DynamicColumnsDoc
|
||||
},
|
||||
{
|
||||
id: 'template',
|
||||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'size',
|
||||
label: 'Size',
|
||||
component: SizeDoc
|
||||
},
|
||||
{
|
||||
id: 'gridlines',
|
||||
label: 'Grid Lines',
|
||||
component: GridLinesDoc
|
||||
},
|
||||
{
|
||||
id: 'striped',
|
||||
label: 'Striped Rows',
|
||||
component: StripedRowsDoc
|
||||
},
|
||||
{
|
||||
id: 'paginator',
|
||||
label: 'Paginator',
|
||||
children: [
|
||||
{
|
||||
id: 'paginator_basic',
|
||||
label: 'Basic',
|
||||
component: PaginatorBasicDoc
|
||||
},
|
||||
{
|
||||
id: 'paginator_template',
|
||||
label: 'Template',
|
||||
component: PaginatorTemplateDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'sort',
|
||||
label: 'Sort',
|
||||
children: [
|
||||
{
|
||||
id: 'single_sort',
|
||||
label: 'Single Column',
|
||||
component: SingleColumnDoc
|
||||
},
|
||||
{
|
||||
id: 'multiple_sort',
|
||||
label: 'Multiple Columns',
|
||||
component: MultipleColumnsDoc
|
||||
},
|
||||
{
|
||||
id: 'pre_sort',
|
||||
label: 'Presort',
|
||||
component: PresortDoc
|
||||
},
|
||||
{
|
||||
id: 'removable_sort',
|
||||
label: 'Removable',
|
||||
component: RemovableSortDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'filter',
|
||||
label: 'Filter',
|
||||
children: [
|
||||
{
|
||||
id: 'basic_filter',
|
||||
label: 'Basic',
|
||||
component: BasicFilterDoc
|
||||
},
|
||||
{
|
||||
id: 'advanced_filter',
|
||||
label: 'Advanced',
|
||||
component: AdvancedFilterDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'row_selection',
|
||||
label: 'Row Selection',
|
||||
children: [
|
||||
{
|
||||
id: 'single_row_selection',
|
||||
label: 'Single',
|
||||
component: SingleRowSelectionDoc
|
||||
},
|
||||
{
|
||||
id: 'multiple_rows_selection',
|
||||
label: 'Multiple',
|
||||
component: MultipleRowsSelectionDoc
|
||||
},
|
||||
{
|
||||
id: 'radiobutton_row_selection',
|
||||
label: 'RadioButton',
|
||||
component: RadioButtonRowSelectionDoc
|
||||
},
|
||||
{
|
||||
id: 'checkbox_row_selection',
|
||||
label: 'Checkbox',
|
||||
component: CheckboxRowSelectionDoc
|
||||
},
|
||||
{
|
||||
id: 'row_selection_events',
|
||||
label: 'Events',
|
||||
component: RowSelectEventsDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'row_expansion',
|
||||
label: 'Row Expansion',
|
||||
component: RowExpansionDoc
|
||||
},
|
||||
{
|
||||
id: 'edit',
|
||||
label: 'Edit',
|
||||
children: [
|
||||
{
|
||||
id: 'cell_edit',
|
||||
label: 'Cell',
|
||||
component: CellEditDoc
|
||||
},
|
||||
{
|
||||
id: 'row_edit',
|
||||
label: 'Row',
|
||||
component: RowEditDoc
|
||||
},
|
||||
{
|
||||
id: 'cell_edit_filter_sort',
|
||||
label: 'Filter & Sort Cell Edit',
|
||||
component: FilterSortEditDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'lazy_load',
|
||||
label: 'Lazy Load',
|
||||
component: LazyLoadDoc
|
||||
},
|
||||
{
|
||||
id: 'scroll',
|
||||
label: 'Scroll',
|
||||
children: [
|
||||
{
|
||||
id: 'vertical_scroll',
|
||||
label: 'Vertical',
|
||||
component: VerticalScrollDoc
|
||||
},
|
||||
{
|
||||
id: 'flex_scroll',
|
||||
label: 'Flexible',
|
||||
component: FlexibleScrollDoc
|
||||
},
|
||||
{
|
||||
id: 'horizontal_scroll',
|
||||
label: 'Horizontal',
|
||||
component: HorizontalScrollDoc
|
||||
},
|
||||
{
|
||||
id: 'frozen_rows',
|
||||
label: 'Frozen Rows',
|
||||
component: FrozenRowsDoc
|
||||
},
|
||||
{
|
||||
id: 'frozen_columns',
|
||||
label: 'Frozen Columns',
|
||||
component: FrozenColumnsDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'virtualscroll',
|
||||
label: 'Virtual Scroll',
|
||||
children: [
|
||||
{
|
||||
id: 'preload_virtualscroll',
|
||||
label: 'Preload',
|
||||
component: PreloadVirtualScrollDoc
|
||||
},
|
||||
{
|
||||
id: 'lazy_virtualscroll',
|
||||
label: 'Lazy',
|
||||
component: LazyVirtualScrollDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'column_group',
|
||||
label: 'Column Group',
|
||||
component: ColumnGroupDoc
|
||||
},
|
||||
{
|
||||
id: 'row_group',
|
||||
label: 'Row Group',
|
||||
children: [
|
||||
{
|
||||
id: 'rowgroup_subheader',
|
||||
label: 'Subheader',
|
||||
component: SubHeaderRowGroupDoc
|
||||
},
|
||||
{
|
||||
id: 'rowgroup_expandable',
|
||||
label: 'Expandable',
|
||||
component: ExpandableRowGroupDoc
|
||||
},
|
||||
{
|
||||
id: 'rowgroup_rowspan',
|
||||
label: 'RowSpan',
|
||||
component: RowSpanRowGroupDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'conditional_style',
|
||||
label: 'Conditional Style',
|
||||
component: ConditionalStyleDoc
|
||||
},
|
||||
{
|
||||
id: 'column_resize',
|
||||
label: 'Column Resize',
|
||||
children: [
|
||||
{
|
||||
id: 'resize_fitmode',
|
||||
label: 'Fit Mode',
|
||||
component: FitModeDoc
|
||||
},
|
||||
{
|
||||
id: 'resize_expandmode',
|
||||
label: 'Expand Mode',
|
||||
component: ExpandModeDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'reorder',
|
||||
label: 'Reorder',
|
||||
component: ReorderDoc
|
||||
},
|
||||
{
|
||||
id: 'column_toggle',
|
||||
label: 'Column Toggle',
|
||||
component: ColumnToggleDoc
|
||||
},
|
||||
{
|
||||
id: 'export',
|
||||
label: 'Export',
|
||||
component: ExportDoc
|
||||
},
|
||||
{
|
||||
id: 'contextmenu',
|
||||
label: 'Context Menu',
|
||||
component: ContextMenuDoc
|
||||
},
|
||||
{
|
||||
id: 'stateful',
|
||||
label: 'Stateful',
|
||||
component: StatefulDoc
|
||||
},
|
||||
{
|
||||
id: 'samples',
|
||||
label: 'Samples',
|
||||
children: [
|
||||
{
|
||||
id: 'customers',
|
||||
label: 'Customers',
|
||||
component: CustomersDoc
|
||||
},
|
||||
{
|
||||
id: 'dtproducts',
|
||||
label: 'Products',
|
||||
component: ProductsDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'style',
|
||||
label: 'Style',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.customerService = new CustomerService();
|
||||
},
|
||||
mounted() {
|
||||
this.customerService.getCustomersLarge().then((data) => {
|
||||
this.customers = data;
|
||||
this.customers.forEach((customer) => (customer.date = new Date(customer.date)));
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
formatDate(value) {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
},
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DataTableDoc: DataTableDoc
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.p-paginator) {
|
||||
.p-paginator-current {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.p-progressbar) {
|
||||
height: 0.5rem;
|
||||
background-color: #d8dadc;
|
||||
|
||||
.p-progressbar-value {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.p-datepicker) {
|
||||
min-width: 25rem;
|
||||
|
||||
td {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.p-datatable.p-datatable-customers) {
|
||||
.p-datatable-header {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr > td {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.p-dropdown-label:not(.p-placeholder) {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue