コンテンツ v1.0.0

データテーブル

組み合わせ可能な機能を備えた柔軟なデータテーブルコンポーネント。ページネーション、 ソート、フィルタリング、検索、一括操作付き行選択、CSVエクスポート、 カラム表示切り替えに対応しています。すべての機能はオプションで有効化でき、 必要に応じて組み合わせられます。

プレビュー & コード

オプション

名前 型 デフォルト 説明
data * Array 必須 Array of hashes representing table rows
columns Array nil Optional column config [{ key: :name, label: 'Name' }]. Auto-inferred from data keys if omitted
pagination Boolean/Integer false Enable pagination. Set to integer (10, 25, 50) to set default per-page
sortable Boolean false Enable column sorting by clicking headers
searchable Boolean false Enable global search input
filterable Boolean false Enable per-column filtering (includes sorting)
selectable Boolean false Enable row checkboxes for bulk selection
exportable Boolean false Enable CSV export button
column_toggle Boolean false Enable show/hide columns dropdown
class String "" Additional CSS classes for the container

変更履歴 v1.0.0

- v1.0.0: Initial release with full feature set
- Client-side pagination with configurable rows per page
- Click-to-sort column headers with ascending/descending toggle
- Global search with debounced filtering
- Per-column filter inputs
- Row selection with select-all checkbox
- CSV export of current filtered/sorted data
- Column visibility toggle with dropdown

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得