toolbox-browser-data-grid

Stars12

Forks9

UpdatedJuly 7, 2026 at 14:51

Specialized data grid implementation for the Vault Toolbox Browser Extension using TanStack Table/Virtual.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

veeva

veeva/Vault-Toolbox

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	toolbox-browser-data-grid
description	Specialized data grid implementation for the Vault Toolbox Browser Extension using TanStack Table/Virtual.
applicable_apps	["toolbox-browser"]

Skill: toolbox-browser-data-grid

This skill provides specialized implementation rules for the Vault Toolbox Browser Extension using TanStack libraries.

1. TanStack Implementation Patterns

Table Hook: Use the useFeatureTable pattern for standardizing sorting and filtering logic.
Virtualization: Use the TanStack Virtual prefix/suffix padding row pattern to preserve sticky header behavior.

2. Styling with Chakra UI

Environment Awareness: Headers must change color based on environment:
- Sandbox: veeva_sandbox_green.500
- Production: veeva_midnight_indigo.500
Semantic Tokens: Use white_color_mode for island backgrounds and beige_color_mode for hover states.

3. Shared Component Priority

Always check if src/app/components/shared/VirtualizedTable.jsx can meet the requirements before building a custom grid.

More from this repository

same repository

toolbox-browser-api-integration

veeva/Vault-Toolbox

Implementation patterns for the Vault Toolbox Browser Extension (Manifest V3).

2026-07-0712

toolbox-browser-brainstormer

veeva/Vault-Toolbox

Specialized design challenges for the Vault Toolbox Browser Extension, focusing on VQL prototyping.

2026-07-0712

toolbox-browser-code-reviewer

veeva/Vault-Toolbox

Specialized audit for the Vault Toolbox Browser Extension, focusing on Island Architecture and UI visibility.

2026-07-0712

toolbox-browser-feature-designer

veeva/Vault-Toolbox

Specialized design requirements for the Vault Toolbox Browser Extension, focusing on UI visibility.

2026-07-0712

toolbox-browser-testing

veeva/Vault-Toolbox

Specialized testing and dev-server protocol for the Vault Toolbox Browser Extension.

2026-07-0712

toolbox-browser-tool-builder

veeva/Vault-Toolbox

Specialized scaffolding and shell integration for the Vault Toolbox Browser Extension.

2026-07-0712

name	toolbox-browser-data-grid
description	Specialized data grid implementation for the Vault Toolbox Browser Extension using TanStack Table/Virtual.
applicable_apps	["toolbox-browser"]

Skill: toolbox-browser-data-grid

This skill provides specialized implementation rules for the Vault Toolbox Browser Extension using TanStack libraries.

1. TanStack Implementation Patterns

Table Hook: Use the useFeatureTable pattern for standardizing sorting and filtering logic.
Virtualization: Use the TanStack Virtual prefix/suffix padding row pattern to preserve sticky header behavior.

2. Styling with Chakra UI

Environment Awareness: Headers must change color based on environment:
- Sandbox: veeva_sandbox_green.500
- Production: veeva_midnight_indigo.500
Semantic Tokens: Use white_color_mode for island backgrounds and beige_color_mode for hover states.

3. Shared Component Priority

Always check if src/app/components/shared/VirtualizedTable.jsx can meet the requirements before building a custom grid.