ObjectList

Usage

This component displays a list of all existing projects. Information about each project is displayed to help users navigate the list. Users can sort the list by column information or search for keywords from all of the information. Users can open projects by clicking anywhere on their row, indicated by the hover state. The default list has 7 columns, but columns can be hidden and renamed depending on the individual program’s requirements.

Types

There is only one type of ObjectList component so far.

Anatomy and Behavior

Anatomy

ObjectList component consists of:

1. Header Row - Each list has one of these at the top, and should be frozen from scrolling.

2. Header Cell - Subcomponent, used for the header cell of columns containing text.

3. Header Cell Centred - Subcomponent, used for the header cell of columns containing numbers.

4. Row - Each row represents a project and when clicked opens that project. These rows scroll and have hover states.

5. Text with Subtext Cell - Subcomponent

6. Text Cell - Subcomponent

7. Number Cell - Subcomponent

Behavior

Tokens

SCSS Variable

Value

$objectList-color

--color-grey-54

$objectList-row-color

--color-grey-25

$objectList-row-hover-color

--color-grey-90

Properties

export interface ObjectListProps {
  rows?: Row[];
  columns?: Column[];
  contextMenuOptions?: { id: number; name: string; action: string; icon: IconName; }[];
}

export interface Row {
  id: string | number;
  [key: string]: CellValue;
}

export type CellValue = { text: string | number; subtext?: string | number; } | string | number;

export interface Column {
  id: string;
  text: string | number;
  category?: ColumnCategory;
  width?: string;
}

export type ColumnCategory = 'text' | 'number' | 'text-multirows';

type CellValueObject = Extract<CellValue, { text: string | number; }>;

Configurations

Basic Example with Event Handlers

<template>
  <ObjectList 
    v-bind="pg"
    :contextMenuOptions="contextMenuOptions"
    @rowClick="handleRowClick"
    @rowRightClick="handleRowRightClick"
    @context-menu-selected="handleContextMenuSelected"
  />
</template>

<script setup lang="ts">
import { ObjectList } from './';
import { tableData } from './components';
import type { IconName } from '@pohlcon/design-system';

const pg = tableData;

// Define context menu options that will appear when right-clicking on a row
const contextMenuOptions = [
  { id: 1, name: 'Delete', action: 'delete', icon: 'close' as IconName },
  { id: 2, name: 'Open on New Tab', action: 'open-new-tab', icon: 'error' as IconName },
  { id: 3, name: 'Duplicate', action: 'duplicate', icon: 'plus' as IconName },
];

const handleRowClick = (id) => {
  console.log('Row clicked:', id);
  // Handle row click event here
  // Example: navigate to project details, open modal, etc.
};

const handleRowRightClick = (id) => {
  console.log('Row right-clicked:', id);
  // This event is still emitted, but the context menu will open automatically
  // if contextMenuOptions are provided
};

const handleContextMenuSelected = (selection: { action: string; id: string | number; rowId: string | number }) => {
  console.log('Context menu action:', selection.action);
  console.log('Menu item ID:', selection.id);
  console.log('Row ID:', selection.rowId);
  // Handle the selected action here
  // Example: deleteItem(selection.rowId), duplicateItem(selection.rowId), etc.
};
</script>

PROJECT	SITE	CUSTOMER	AUTHOR	LAST MODIFIED	STATUS	EXPORTS
Office Complex PN-0123	Alexanderplatz 1 10178, Berlin	Tech GmbH	John Doe 2023-10-01	Jane Smith 2 days ago	5 / 45	46
Shopping Mall PN-2045	Köln HBf 50667, Köln	Retail Group	Max Must 2023-09-15	Anna Müller 3 weeks ago	12 / 60	78
Residential PN-3078	Marienplatz 5 80331, München	Home Inc.	Michael Schmidt 2023-08-20	Lisa Becker 1 month ago	23 / 12	32