Press Next

# MatchTableHeader

Table header component for displaying table column titles, supports sorting, custom alignment and column width settings.

# Features

  • πŸ“Š Column Configuration - Flexible column configuration with width, alignment and other properties
  • πŸ”„ Sorting Function - Supports column sorting with three states: none, ascending, descending
  • 🎨 Custom Styles - Rich CSS variables for theme customization
  • πŸ”§ Slot Support - Support custom column header content
  • πŸ“± Responsive - Adapt to different screen sizes
  • ⚑ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • Data list display
  • Leaderboard header
  • Schedule table header
  • Score table header
  • Any scenario requiring table display

# Import

import PressMatchTableHeader from 'press-next/press-match-table-header/press-match-table-header';

# Code Demo

# Basic Usage

<template>
  <PressMatchTableHeader
    :columns="columns"
    @sort="handleSort"
  />
</template>

<script setup>
import { ref } from 'vue';
import PressMatchTableHeader from 'press-next/press-match-table-header/press-match-table-header';

const columns = ref([
  {
    key: 'rank',
    title: 'Rank',
    width: 'auto',
    align: 'left',
    sortable: false,
  },
  {
    key: 'nickname',
    title: 'Player Name',
    width: '1.2rem',
    align: 'left',
    sortable: false,
  },
  {
    key: 'contact',
    title: 'Contact',
    width: '1.2rem',
    align: 'center',
    sortable: false,
  },
  {
    key: 'kills',
    title: 'Kills',
    width: '1.2rem',
    align: 'center',
    sortable: true,
  },
]);

const handleSort = ({ key, order }) => {
  console.log('Sort:', key, order);
};
</script>

# Support Sorting

<template>
  <PressMatchTableHeader
    :columns="sortableColumns"
    @sort="handleSort"
  />
</template>

<script setup>
import { ref } from 'vue';

const sortableColumns = ref([
  {
    key: 'rank',
    title: 'Rank',
    width: '1rem',
    align: 'center',
    sortable: true,
  },
  {
    key: 'score',
    title: 'Score',
    width: '1.2rem',
    align: 'center',
    sortable: true,
  },
  {
    key: 'time',
    title: 'Time',
    width: '1.2rem',
    align: 'center',
    sortable: true,
  },
]);

const handleSort = ({ key, order }) => {
  console.log(`Sort by ${key} ${order === 'asc' ? 'ascending' : order === 'desc' ? 'descending' : 'none'}`);
  // You can call API to fetch data here
};
</script>

# Custom Column Width and Alignment

<template>
  <PressMatchTableHeader
    :columns="customColumns"
  />
</template>

<script setup>
import { ref } from 'vue';

const customColumns = ref([
  {
    key: 'id',
    title: 'ID',
    width: '.8rem',
    align: 'left',
  },
  {
    key: 'name',
    title: 'Name',
    width: '2rem',
    align: 'left',
  },
  {
    key: 'status',
    title: 'Status',
    width: '1rem',
    align: 'center',
  },
  {
    key: 'action',
    title: 'Action',
    width: '1.5rem',
    align: 'right',
  },
]);
</script>

# Custom Column Header

<template>
  <PressMatchTableHeader
    :columns="columns"
  >
    <template #header-rank="{ column }">
      <div class="custom-header">
        <span class="icon">πŸ†</span>
        <span>{{ column.title }}</span>
      </div>
    </template>
    
    <template #header-score="{ column }">
      <div class="custom-header">
        <span class="icon">⭐</span>
        <span>{{ column.title }}</span>
      </div>
    </template>
  </PressMatchTableHeader>
</template>

<script setup>
import { ref } from 'vue';

const columns = ref([
  { key: 'rank', title: 'Rank', width: '1rem', align: 'center' },
  { key: 'score', title: 'Score', width: '1.2rem', align: 'center' },
  { key: 'player', title: 'Player', width: '1.5rem', align: 'left' },
]);
</script>

<style scoped>
.custom-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon {
  font-size: 16px;
}
</style>

# Schedule Table Header

<template>
  <PressMatchTableHeader
    :columns="scheduleColumns"
  />
</template>

<script setup>
import { ref } from 'vue';

const scheduleColumns = ref([
  {
    key: 'rounds',
    title: 'Rounds',
    width: '1.2rem',
    align: 'left',
  },
  {
    key: 'settings',
    title: 'Match Settings',
    width: '2rem',
    align: 'center',
  },
  {
    key: 'ways',
    title: 'Finals Method',
    width: '1.4rem',
    align: 'center',
  },
  {
    key: 'operate',
    title: 'Actions',
    width: '1.6rem',
    align: 'center',
  },
]);
</script>

# API

# Props

Parameter Description Type Default
columns Column config array Column[] []
custom-class Custom style class string ''

# Column Data Structure

interface Column {
  key: string; // Unique identifier of column
  title: string; // Column title
  width?: string; // Column width, like '1.2rem' or 'auto'
  minWidth?: string; // Minimum width
  align?: 'left' | 'center' | 'right'; // Alignment
  sortable?: boolean; // Whether sortable
}

# Slots

Name Description Parameters
header-{key} Custom column header content, {key} is the column key { column: Column }

# Events

Event Description Parameters
sort Triggered when sort click { key: string, order: 'asc' \| 'desc' \| null }

# Notes

# Usage Recommendations

  1. Column Width Setting: Recommend using rem unit for column width to ensure consistency across devices
  2. Alignment: Numeric data should use center or right alignment, text data should use left alignment
  3. Sorting Function: Sorting state cycles through three states: none β†’ ascending β†’ descending β†’ none
  4. Minimum Width: Use minWidth to set minimum column width to prevent content compression
  5. Custom Header: Use header-{key} slot to fully customize column header display

# Performance Optimization

  • Recommend wrapping column config with ref to avoid unnecessary re-renders
  • For many columns, recommend setting fixed width to avoid frequent browser calculations
  • Recommend debouncing sort operations

# Compatibility

  • Supports Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Supports WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

# Style Variables

# Spacing System

Name Default Description
--pmth-header-cell-padding 0 Header cell padding
--pmth-header-cell-padding-left $spacing-md Header left padding
--pmth-sort-icon-margin-left .08rem Sort icon left margin
--pmth-sort-arrow-margin-bottom .02rem Sort arrow bottom margin

# Box Model System

Name Default Description
--pmth-table-header-width 100% Table header width
--pmth-table-header-container-width 100% Table header container width
--pmth-header-overflow-x auto Header horizontal overflow
--pmth-header-height .7rem Header height
--pmth-header-cell-min-width 1.4rem Header cell minimum width
--pmth-sort-icon-size .24rem Sort icon size
--pmth-sort-arrow-size .08rem Sort arrow size

# Color System

Name Default Description
--pmth-table-header-container-bg-color transparent Table header container background color
--pmth-table-header-container-bg-image url(...) Table header container background image
--pmth-table-header-container-bg-size 100% 100%, 100% 100%, cover Table header container background size
--pmth-table-header-container-bg-position center, center, center Table header container background position
--pmth-table-header-container-bg-repeat no-repeat, no-repeat, no-repeat Table header container background repeat
--pmth-header-cell-color $color-text-invert-light Header cell text color
--pmth-sort-arrow-color #adb5bd Sort arrow color
--pmth-sort-arrow-active-color $color-surface-brand Active sort arrow color

# Typography System

Name Default Description
--pmth-header-cell-font-size $font-size-xs Header cell font size
--pmth-header-cell-font-weight $font-weight-regular Header cell font weight
--pmth-header-cell-line-height 1.5 Header cell line height

# Others

Name Default Description
--pmth-table-header-position relative Table header position
--pmth-table-header-container-position relative Table header container position
--pmth-header-cell-position relative Header cell position
--pmth-sort-icon-position relative Sort icon position
--pmth-header-cell-sortable-user-select none Sortable header cell user select
--pmth-header-cell-justify-content-left flex-start Header cell left align
--pmth-header-cell-justify-content-center center Header cell center align
--pmth-header-cell-justify-content-right flex-end Header cell right align

← MatchTeamInfoItem β†’