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