diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss index 01721ffd8..f217cf40d 100644 --- a/src/assets/styles/app/_content.scss +++ b/src/assets/styles/app/_content.scss @@ -15,6 +15,11 @@ font-size: 2rem; margin: 0 0 1.5rem 0; font-weight: 700; + + span { + font-weight: 400; + color: var(--text-color-secondary); + } } p { diff --git a/src/views/datatable/DataTableBasicDemo.vue b/src/views/datatable/DataTableBasicDemo.vue index f182f0fa1..a2a0283d7 100755 --- a/src/views/datatable/DataTableBasicDemo.vue +++ b/src/views/datatable/DataTableBasicDemo.vue @@ -2,7 +2,7 @@
DataTable requires a collection to display along with column components for the representation of the data.
Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components.
Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In "expand" mode, table width also changes along with the column width.
MultiSelect component can be used to implement column toggle functionality.
CDataTable has exclusive integration with ContextMenu.
This samples demonstrates a CRUD implementation using various PrimeReact components.
Columns can be defined dynamically using the v-for directive.
In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue index 40c0293ec..6d57743c6 100755 --- a/src/views/datatable/DataTablePaginatorDemo.vue +++ b/src/views/datatable/DataTablePaginatorDemo.vue @@ -2,7 +2,7 @@Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.
Order of the columns and rows can be changed using drag and drop.
DataTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on a small screens.
A row can be expanded to display additional content.
Rows can either be grouped by a separate grouping row or using rowspan.
Data scrolling is available horizontally, vertically or both. Virtual Scrolling mode is also provided to deal with large datasets by loading data on demand during scrolling.
DataTable provides single and multiple selection modes based on row click or using radio button and checkbox elements.
In addition to a regular table, a smaller and a larger alternatives available.
Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and used with metaKey.
Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings.
Certain rows or cells can easily be styled based on conditions.
Custom content at header, body and footer sections are supported via templating.
Galleria can be extended further to implement complex requirements.
AutoPlay mode is used to implement slideshows.
Caption displays a description for an item.
In fullscreen mode content covers the whole page over a mask..
Indicators allow quick navigation between the items.
Combining item navigators, thumbnails and indicators provide various UI alternatives.
Galleria can be controlled programmatically using the activeIndex property.
Galleria responsiveness is defined with the responsiveOptions property.
Thumbnails represent a smaller version of the actual content.
Filtering updates the node based on the constraints.
Lazy loading is handy when dealing with huge datasets. This example imitates a lazy loading case with timeouts.
Tree supports single, multiple and checkbox as selection modes.
Tree is used to display hierarchical data.
Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In "expand" mode, table width also changes along with the column width.
MultiSelect component can be used to implement column toggle functionality.
Filtering is enabled by defining a filter template per column to populate the filters property of the TreTable.
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging or sorting. In addition, children of a node can be loaded on demand at onNodeExpand event as well. Sample belows imitates lazy paging by using an in memory list..
Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of root level nodes per page.
TreeTable supports single, multiple and checkbox as selection modes.
In addition to a regular table, a smaller and a larger alternatives available.
TreeTable supports both single column and multiple column sorting..
Custom content at header, body and footer sections are supported via templating.