pn-data-display-temp

pn-data-display

A Vue 3 component library for displaying and managing data in various formats.

Table of Contents

• Installation
• Components
• Usage
• Props
• Events
• Styling
• Development

Installation

npm install pn-data-display

Components

Component	Description
DataDisplay	Main component for displaying data in different structures (Table, Kanban, List, Timeline)
Table	Component for displaying data in a tabular format
KanbanBoard	Component for displaying data in a Kanban board format
Pagination	Component for handling pagination

Usage

<template>
  <DataDisplay
    :data-source="dataSource"
    :data="data"
    :columns="columns"
    :table-url="tableUrl"
    :kanban-url="kanbanUrl"
    :show-search="true"
    :show-filters="true"
    :show-pagination="true"
  />
</template>

<script setup>
import { DataDisplay } from 'pn-data-display';
import 'pn-data-display/dist/style.css';

// ... your component logic
</script>

Props

DataDisplay Component

Prop	Type	Default	Description
dataSource	String	'client'	Data source type ('client' or 'remote')
showDisplayStructureSelector	Boolean	true	Show/hide display structure selector
showSearch	Boolean	false	Show/hide search functionality
showFilters	Boolean	true	Show/hide filters
showPagination	Boolean	true	Show/hide pagination
data	Array	[]	Data to be displayed (for client-side data source)
tableUrl	String	''	URL for fetching table data (for remote data source)
kanbanUrl	String	''	URL for fetching Kanban data (for remote data source)
searchQuery	String	''	Initial search query
columns	Array	[]	Column definitions for table structure
pageSize	Number	50	Number of items per page
currentPage	Number	1	Initial current page
sortOrder	String	'asc'	Initial sort order ('asc' or 'desc')
sortBy	String	''	Initial sort field
filters	Object	{}	Initial filters
rowColorClasses	Object	{ odd: '', even: '' }	CSS classes for odd and even rows
kanbanColumnKey	String	'status'	Key for Kanban column grouping
kanbanColumns	Array	[]	Kanban column definitions
kanbanKeyProp	String	''	Key property for Kanban items
kanbanTitleProp	String	''	Title property for Kanban items
kanbanSubtitleProp	String	''	Subtitle property for Kanban items
kanbanBodyProp	String	''	Body property for Kanban items

Table Component

Prop	Type	Default	Description
dataSource	String	-	Data source type ('client' or 'remote')
showSearch	Boolean	-	Show/hide search functionality
showFilters	Boolean	-	Show/hide filters
showPagination	Boolean	-	Show/hide pagination
data	Array	-	Data to be displayed (for client-side data source)
tableUrl	String	-	URL for fetching table data (for remote data source)
searchQuery	String	-	Initial search query
columns	Array	-	Column definitions
pageSize	Number	-	Number of items per page
currentPage	Number	-	Initial current page
sortOrder	String	-	Initial sort order ('asc' or 'desc')
sortBy	String	-	Initial sort field
filters	Object	-	Initial filters
rowColorClasses	Object	-	CSS classes for odd and even rows

KanbanBoard Component

Prop	Type	Default	Description
kanbanUrl	String	-	URL for fetching Kanban data
tableUrl	String	-	URL for fetching table data
showSearch	Boolean	-	Show/hide search functionality
showFilters	Boolean	-	Show/hide filters
showPagination	Boolean	-	Show/hide pagination
pageSize	Number	-	Number of items per page
columnKey	String	'Status'	Key for Kanban column grouping
columns	Array	-	Kanban column definitions
titleProp	String	-	Title property for Kanban items
subtitleProp	String	-	Subtitle property for Kanban items
bodyProp	String	-	Body property for Kanban items
sortableFields	Array	['name', 'acquisitionDate', 'value']	Fields that can be sorted

Pagination Component

Prop	Type	Default	Description
currentPage	Number	1	Current page number
pageSize	Number	10	Number of items per page
totalItems	Number	-	Total number of items
maxVisiblePages	Number	5	Maximum number of visible page buttons

Events

DataDisplay Component

Event	Payload	Description
page-change	{ currentPage, pageSize }	Emitted when the current page changes
page-size-change	{ currentPage, pageSize }	Emitted when the page size changes
search	searchQuery	Emitted when the search query changes
filter	filters	Emitted when filters are applied
row-selection	selectedRows	Emitted when rows are selected/deselected
sort	{ sortBy, sortOrder }	Emitted when the sort field or order changes

Table Component

Event	Payload	Description
page-change	{ currentPage, pageSize }	Emitted when the current page changes
page-size-change	{ currentPage, pageSize }	Emitted when the page size changes
search	searchQuery	Emitted when the search query changes
filter	filters	Emitted when filters are applied
row-selection	selectedRows	Emitted when rows are selected/deselected
sort	{ sortBy, sortOrder }	Emitted when the sort field or order changes

KanbanBoard Component

Event	Payload	Description
page-change	{ currentPage, pageSize }	Emitted when the current page changes
page-size-change	{ currentPage, pageSize }	Emitted when the page size changes
search	searchQuery	Emitted when the search query changes
filter	filters	Emitted when filters are applied
sort	{ sortBy, sortOrder }	Emitted when the sort field or order changes

Pagination Component

Event	Payload	Description
page-change	page	Emitted when the current page changes
page-size-change	pageSize	Emitted when the page size changes

Styling

The component library uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project for proper styling.

Development

To build the component library:

npm run build

To generate LLM-related files:

npm run llm

License

LGPL v3