Frontend Tables Tanstack Table
by kk0ga
TanStack Table で勤怠一覧/勤務表を作る。列定義、ソート/フィルタ、ページング、集計行、アクセシビリティ、CSV出力の型を固定する。キーワード: TanStack Table, table, columns, sorting, filtering, CSV
Skill Details
Repository Files
1 file in this skill directory
name: frontend-tables-tanstack-table description: 'TanStack Table で勤怠一覧/勤務表を作る。列定義、ソート/フィルタ、ページング、集計行、アクセシビリティ、CSV出力の型を固定する。キーワード: TanStack Table, table, columns, sorting, filtering, CSV' license: MIT
TanStack Table Skill
目的
勤怠の一覧UI（勤務表、承認一覧）を“同じ操作感”で提供する。
標準機能（まずはこれだけ）
- 列：日付/曜日/出勤/退勤/休憩/実働/備考
- ソート：日付
- フィルタ：yearMonth（必須）、status（承認一覧）
- 行：空値の表示ルール（-- など）
実装ルール
- 列定義は feature 配下に置き、再利用する
- 表示用フォーマット（時刻/分→時間）を共通化
- 大量行は仮想化を検討（必要になってから）
成果物
- 列定義（TS）
- フィルタUI仕様
- CSV出力のカラム対応表
依頼例
- 「勤務表の列定義と表示フォーマットを統一したい」
- 「承認一覧に status フィルタを付けたい」
References
Related Skills
Attack Tree Construction
Build comprehensive attack trees to visualize threat paths. Use when mapping attack scenarios, identifying defense gaps, or communicating security risks to stakeholders.
Grafana Dashboards
Create and manage production Grafana dashboards for real-time visualization of system and application metrics. Use when building monitoring dashboards, visualizing metrics, or creating operational observability interfaces.
Matplotlib
Foundational plotting library. Create line plots, scatter, bar, histograms, heatmaps, 3D, subplots, export PNG/PDF/SVG, for scientific visualization and publication figures.
Scientific Visualization
Create publication figures with matplotlib/seaborn/plotly. Multi-panel layouts, error bars, significance markers, colorblind-safe, export PDF/EPS/TIFF, for journal-ready scientific plots.
Seaborn
Statistical visualization. Scatter, box, violin, heatmaps, pair plots, regression, correlation matrices, KDE, faceted plots, for exploratory analysis and publication figures.
Shap
Model interpretability and explainability using SHAP (SHapley Additive exPlanations). Use this skill when explaining machine learning model predictions, computing feature importance, generating SHAP plots (waterfall, beeswarm, bar, scatter, force, heatmap), debugging models, analyzing model bias or fairness, comparing models, or implementing explainable AI. Works with tree-based models (XGBoost, LightGBM, Random Forest), deep learning (TensorFlow, PyTorch), linear models, and any black-box model
Pydeseq2
Differential gene expression analysis (Python DESeq2). Identify DE genes from bulk RNA-seq counts, Wald tests, FDR correction, volcano/MA plots, for RNA-seq analysis.
Query Writing
For writing and executing SQL queries - from simple single-table queries to complex multi-table JOINs and aggregations
Pydeseq2
Differential gene expression analysis (Python DESeq2). Identify DE genes from bulk RNA-seq counts, Wald tests, FDR correction, volcano/MA plots, for RNA-seq analysis.
Scientific Visualization
Meta-skill for publication-ready figures. Use when creating journal submission figures requiring multi-panel layouts, significance annotations, error bars, colorblind-safe palettes, and specific journal formatting (Nature, Science, Cell). Orchestrates matplotlib/seaborn/plotly with publication styles. For quick exploration use seaborn or plotly directly.