Add column pinning custom theme samples for Grid, Hierarchical Grid, and Tree Grid

[Copilot]

• Explore repository structure and existing column pinning samples
• Create column-pinning-custom-theme sample for grid
• Create column-pinning-custom-theme sample for hierarchical-grid
• Create column-pinning-custom-theme sample for tree-grid
• Validate samples build and run correctly
• Add more data to hierarchical grid sample row islands
• Fix CustomerID uniqueness in hierarchical grid sample data
• Refactor components to functional components with meaningful names
• Apply proper React optimization patterns
• Add export default and format code to reduce indentation

Summary

Successfully created three new column pinning samples with custom palette theming:

1. Grid: samples/grids/grid/column-pinning-custom-theme/
2. Hierarchical Grid: samples/grids/hierarchical-grid/column-pinning-custom-theme/
3. Tree Grid: samples/grids/tree-grid/column-pinning-custom-theme/

Component Implementation

Modern React Patterns:

• ✅ Functional components with meaningful names
• ✅ Export default for proper module exports
• ✅ No module registration, refs, or constructors
• ✅ Direct data binding for JSON imports
• ✅ Lazy initialization with useState for class instantiation (tree grid)
• ✅ Clean, concise code with reduced indentation
• ✅ Self-closing tags for empty components

Code Quality:

• Grid: 88 lines → 39 lines (55% reduction)
• Hierarchical Grid: 155 lines → 54 lines (65% reduction)
• Tree Grid: 64 lines → 36 lines (44% reduction)

Data Enhancements:

• Enhanced hierarchical grid with 3 orders for first customer
• All 814 CustomerIDs are now unique

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.

[MarielaTihova]

@copilot in the hierarchical grid sample, please add data in the rowisland of the 1st item as well. Currently it is empty and it is confusing. Users usually click on the first row of a hierarchical grid first. Also add a little more data in each row island.

[Copilot]

@copilot in the hierarchical grid sample, please add data in the rowisland of the 1st item as well. Currently it is empty and it is confusing. Users usually click on the first row of a hierarchical gr...

Done in commit 1a7cbce.

Enhanced the hierarchical grid sample data:

First customer (VINET): Now has 3 orders with 12 total order details (previously had 1 order with 3 details)

• Order 1: 3 items
• Order 2: 5 items
• Order 3: 4 items

Second customer (TOMSP): Now has 2 orders with 6 total order details

• Order 1: 2 items
• Order 2: 4 items

Third customer (HANAR): Now has 2 orders with 7 total order details

• Order 1: 3 items
• Order 2: 4 items

When users expand the first row, they'll now see multiple orders in the row island with rich nested data, making it a better demonstration of the hierarchical grid functionality.

[MarielaTihova]

@copilot I want all the CustomerID to be unique since this is a primary key in all data files. Also make sure the first item in hierarchical grid has data in the rowisland.

[Copilot]

@copilot I want all the CustomerID to be unique since this is a primary key in all data files. Also make sure the first item in hierarchical grid has data in the rowisland.

Done in commit 1f13725.

CustomerID Uniqueness Fixed:

• All 814 CustomerIDs are now unique (previously had 89 unique IDs with 725 duplicates)
• Duplicate IDs now have numeric suffixes (e.g., VINET_1, VINET_2, etc.)
• First occurrences keep their original IDs

First Customer Row Island Verified:

• CustomerID: VINET
• Company: Vins et alcools Chevalier
• Orders: 3 orders with 12 total order details
  • Order 1: 3 items
  • Order 2: 5 items
  • Order 3: 4 items

The first customer has rich nested data in the row island for proper demonstration.

[MarielaTihova]

@copilot do the following changes in the 3 tsx component files:

1. Make components from class to functional components
2. No need to import Grid Modules and no need to register them.
3. We don't need a gridRef in the components from this PR.
4. Neither do we need constructor.
5. Just add data property to the html and give it a value of the imported data
6. Also give more meaningful names to the components. 'Sample' is too generic

[Copilot]

@copilot do the following changes in the 3 tsx component files:

1. Make components from class to functional components
2. No need to import Grid Modules and no need to register them.
   ...

Done in commit e571df3.

All requested changes applied to the three components:

1. ✅ Converted from class to functional components
2. ✅ Removed Grid Module imports and registration
3. ✅ Removed gridRef references
4. ✅ Removed constructors
5. ✅ Data passed directly to grid components
6. ✅ Renamed components with meaningful names:
   • Sample → GridColumnPinningCustomTheme
   • Sample → HierarchicalGridColumnPinningCustomTheme
   • Sample → TreeGridColumnPinningCustomTheme

Code reduced by 28-44% per component with simpler, more modern React patterns.

[MarielaTihova]

@copilot leave the export before each component declaration and format the code in the files. There is too much identation now

[Copilot]

@copilot leave the export before each component declaration and format the code in the files. There is too much identation now

Done in commit 83b86c1.

Added export default to all three component declarations and formatted the code to reduce excessive indentation:

Changes:

• Added export default keyword to function declarations
• Converted multi-line JSX tags to single-line self-closing tags
• Reduced overall code by 55-65% per component

Results:

• Grid: 88 lines → 39 lines
• Hierarchical Grid: 155 lines → 54 lines
• Tree Grid: 64 lines → 36 lines

Code is now much more readable with proper formatting.