Section Table Large Cell

The VSectionTableLargeCell component renders a responsive table section with customizable headers and rows. It adjusts the number of visible columns based on the screen size, hiding specific columns for tablet and smaller devices.

Props

Prop Name	Type	Default	Required	Description
`data`	`ISectionTableLargeCell`	`undefined`	Yes	An object containing the table title, subtitle, headers, and rows.

interface ISectionTableLargeCell {
  title: string;        // Title of the table section
  subtitle: string;     // Subtitle of the table section (supports HTML)
  header: string[];     // Array of column headers
  items: string[][];    // Array of rows, where each row is an array of strings
}

Slots

infoShort: Slot for additional content displayed above the items list.

Example

vue

<script setup>
import VSectionTableLargeCell from 'UiKit/components/VSection/VSectionTableLargeCell.vue';
const tableData = {
  title: "Project Milestones",
  subtitle: "Key milestones achieved throughout the development process.",
  header: ["Stage", "Details", "Completion Date"],
  items: [
    ["Planning", "Initial research and documentation", "2023-01-15"],
    ["Development", "Coding and testing", "2023-06-30"],
    ["Deployment", "Final deployment to production", "2023-12-01"],
  ],
};
</script>
<template>
<VSectionTableLargeCell :data="tableData" />
</template>

Project Milestones

Key milestones achieved throughout the development process.

Stage	Details	Completion Date
Planning	Initial research and documentation	2023-01-15
Development	Coding and testing	2023-06-30
Deployment	Final deployment to production	2023-12-01