Skip to content

Conversation

Copy link

Copilot AI commented Oct 22, 2025

This PR adds three new column pinning samples with custom palette theming, following the same pattern established in PR #927 for cell editing.

What's Added

Created column-pinning-custom-theme samples for:

  • Grid: samples/grids/grid/column-pinning-custom-theme/
  • Hierarchical Grid: samples/grids/hierarchical-grid/column-pinning-custom-theme/
  • Tree Grid: samples/grids/tree-grid/column-pinning-custom-theme/

Key Features

Each sample demonstrates custom palette theming for column pinning with:

Color Palette System

  • Organized CSS variables for base colors (white, blue, orange, gold, gray, dark-gray, border-gray)
  • Semantic palette variables (primary, secondary, surface, accent, highlight, background, border)
  • Secondary color variations for consistent theming

Column Pinning Styling

The samples showcase custom styling of pinned columns using palette variables:

.custom-grid-palette-theme { --ig-grid-pinned-border-width: 5px; --ig-grid-pinned-border-color: var(--palette-accent); --ig-grid-pinned-border-style: double; --ig-grid-cell-active-border-color: var(--palette-accent); }

Visual Design

  • Uses dark bootstrap theme for modern appearance
  • Gold accent color (#ffcd0f) for pinned column borders
  • Double-border style for clear visual distinction
  • Interactive grid toolbar with column pinning UI

Implementation Details

Each sample includes:

  • Complete React TypeScript implementation
  • Custom CSS with palette variables
  • Sample data (CustomersDataLocal.json, HierarchicalCustomersData.json, EmployeesFlatData.ts)
  • All necessary configuration files (package.json, tsconfig.json, vite.config.js, .eslintrc.js)
  • Documentation (ReadMe.md)

All samples have been validated:

  • ✅ TypeScript compilation passes
  • ✅ Builds successfully with Vite
  • ✅ No security vulnerabilities detected

Fixes #930

Original prompt

This section details on the original issue you should resolve

<issue_title>Create palletes sample for the column pinning topic</issue_title>
<issue_description>Create samples with custom palletes for the column pinning topic . Refer to column pinning samples in this repo and create samples. The samples should look like the ones in this PRs:
Grid: #929
Hgrid and Tgrid: #927</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #933


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 2 commits October 22, 2025 11:29
…and tree-grid Co-authored-by: tishko0 <15924795+tishko0@users.noreply.github.com>
Co-authored-by: tishko0 <15924795+tishko0@users.noreply.github.com>
Copilot AI changed the title [WIP] Create palletes sample for column pinning topic Add column pinning custom theme samples for Grid, Hierarchical Grid, and Tree Grid Oct 22, 2025
Copilot finished work on behalf of tishko0 October 22, 2025 11:37
Copilot AI requested a review from tishko0 October 22, 2025 11:37
@tishko0 tishko0 marked this pull request as ready for review October 23, 2025 08:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants