{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-table",
  "title": "Custom Table",
  "description": "カスタムテーブル",
  "dependencies": [
    "tanstack-react-table",
    "nuqs",
    "lucide-react"
  ],
  "registryDependencies": [
    "table",
    "button",
    "https://byhr-registry.vercel.app/r/table-utilities.json"
  ],
  "files": [
    {
      "path": "registry/br-hr/blocks/custom-table.tsx",
      "content": "\"use client\";\nimport {\n\tflexRender,\n\ttype RowData,\n\ttype Table as TableType,\n} from \"@tanstack/react-table\";\nimport {\n\tChevronLeftIcon,\n\tChevronRightIcon,\n\tChevronsLeftIcon,\n\tChevronsRightIcon,\n\tXIcon,\n} from \"lucide-react\";\nimport { parseAsString, useQueryStates } from \"nuqs\";\nimport { useEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/br-hr/ui/button\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/registry/br-hr/ui/table\";\nimport { getDispPage } from \"@/registry/br-hr/utilities/table/index\";\n\ndeclare module \"@tanstack/react-table\" {\n\tinterface ColumnMeta<TData extends RowData, TValue> {\n\t\twidth?: string;\n\t\tminWidth?: string;\n\t\tmaxWidth?: string;\n\t}\n}\n\n/**\n * テーブル描画用の共通コンポーネント\n * @remarks\n * `data` は各行のキーに対してセルとして描画可能な値（`ReactNode | string | number | boolean | null | undefined`）を持つレコード配列として扱います。\n */\ntype PropsType<TData> = {\n\ttable: TableType<TData>;\n\ttotalPage: number;\n\tbodyClassName?: string;\n\trowClassName?: string;\n\ttoastContent?: (table: TableType<TData>) => React.ReactNode;\n\t/**\n\t * 右端のカラムを固定するかどうか\n\t * @default false\n\t */\n\tstickyRightColumn?: boolean;\n};\nconst pageParser = {\n\tpage_index: parseAsString.withDefault(\"0\"),\n\tpage_size: parseAsString.withDefault(\"30\"),\n};\n\nconst CustomTable = <TData,>(props: PropsType<TData>) => {\n\tconst {\n\t\ttable,\n\t\ttotalPage,\n\t\tbodyClassName,\n\t\trowClassName,\n\t\ttoastContent,\n\t\tstickyRightColumn = false,\n\t} = props;\n\n\t// スクロール要素のref\n\tconst scrollContainerRef = useRef<HTMLDivElement>(null);\n\t// 前のページインデックスを追跡するref\n\tconst prevPageIndexRef = useRef<string>(\"0\");\n\n\t// ページインデックスの管理\n\tconst [page, setPage] = useQueryStates(pageParser, {\n\t\tshallow: false,\n\t});\n\n\tconst handlePageIndexChange = (value: string) => {\n\t\tsetPage({ page_index: value });\n\t};\n\n\t// ページインデックス変更後にスクロールを一番上に戻す\n\tuseEffect(() => {\n\t\t// ページインデックスが実際に変更された場合のみスクロールをリセット\n\t\tif (\n\t\t\tprevPageIndexRef.current !== page.page_index &&\n\t\t\tscrollContainerRef.current\n\t\t) {\n\t\t\tscrollContainerRef.current.scrollTop = 0;\n\t\t\tprevPageIndexRef.current = page.page_index;\n\t\t}\n\t});\n\n\t// ページネーション情報取得\n\tconst currentPage = Number(page.page_index) ?? 0;\n\n\t// ページネーション表示情報取得\n\tconst display = getDispPage(currentPage, totalPage);\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t<div className={cn(\"relative w-full\", \"overflow-x-auto\")}>\n\t\t\t\t{/* ボディ部分 - スクロール可能 */}\n\t\t\t\t<div\n\t\t\t\t\tref={scrollContainerRef}\n\t\t\t\t\tclassName={cn(\"max-h-[calc(100vh-380px)]\", bodyClassName)}\n\t\t\t\t>\n\t\t\t\t\t<Table className=\"w-full table-fixed\">\n\t\t\t\t\t\t<TableHeader>\n\t\t\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => {\n\t\t\t\t\t\t\t\tconst headers = headerGroup.headers;\n\t\t\t\t\t\t\t\tconst lastHeaderIndex = headers.length - 1;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t\t\t{headers.map((header, index) => {\n\t\t\t\t\t\t\t\t\t\t\tconst isLastColumn =\n\t\t\t\t\t\t\t\t\t\t\t\tstickyRightColumn && index === lastHeaderIndex;\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"sticky top-0 bg-muted p-2 text-center font-normal\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisLastColumn && \"sticky right-0 z-20\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tmaxWidth: header.column.columnDef.meta?.maxWidth,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tminWidth: header.column.columnDef.meta?.minWidth,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: header.column.columnDef.meta?.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TableHeader>\n\t\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t\t{table.getRowModel().rows.map((row) => {\n\t\t\t\t\t\t\t\tconst cells = row.getVisibleCells();\n\t\t\t\t\t\t\t\tconst lastCellIndex = cells.length - 1;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\"group h-10\", rowClassName)}\n\t\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{cells.map((cell, index) => {\n\t\t\t\t\t\t\t\t\t\t\tconst isLastColumn =\n\t\t\t\t\t\t\t\t\t\t\t\tstickyRightColumn && index === lastCellIndex;\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"p-0 group-hover:bg-muted\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisLastColumn && \"sticky right-0 z-10 bg-white\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tmaxWidth: cell.column.columnDef.meta?.maxWidth,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tminWidth: cell.column.columnDef.meta?.minWidth,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: cell.column.columnDef.meta?.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex h-full w-full items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TableBody>\n\t\t\t\t\t</Table>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{totalPage > 1 && (\n\t\t\t\t<div className=\"mt-4 flex items-center justify-between\">\n\t\t\t\t\t<div className=\"flex items-center space-x-6 lg:space-x-8\">\n\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\tclassName=\"hidden h-8 w-8 p-0 disabled:bg-[#E3E4EC] lg:flex\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\thandlePageIndexChange(\"0\");\n\t\t\t\t\t\t\t\t\ttable.toggleAllPageRowsSelected(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={currentPage === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ChevronsLeftIcon className=\"h-4 w-4 text-[#6C757D]\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\tclassName=\"h-8 w-8 p-0 disabled:bg-[#E3E4EC]\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\thandlePageIndexChange((currentPage - 1).toString());\n\t\t\t\t\t\t\t\t\ttable.toggleAllPageRowsSelected(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={currentPage === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Go to previous page</span>\n\t\t\t\t\t\t\t\t<ChevronLeftIcon className=\"h-4 w-4 text-[#6C757D]\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t{display?.map((d) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<div key={d.value}>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"h-8 w-8 p-0 font-inter font-normal text-[#6C757D] text-sm disabled:bg-[#E3E4EC]\",\n\t\t\t\t\t\t\t\t\t\t\t\td.label === \"...\" && \"cursor-default hover:bg-white\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\ttable.toggleAllPageRowsSelected(false);\n\t\t\t\t\t\t\t\t\t\t\t\tif (d.label !== \"...\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttable.setPageIndex(d.value - 1);\n\t\t\t\t\t\t\t\t\t\t\t\t\thandlePageIndexChange((d.value - 1).toString());\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\t\t(d.value === 1 && Number(currentPage) === 0) ||\n\t\t\t\t\t\t\t\t\t\t\t\td.value - 1 === Number(currentPage)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{d.label}\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\tclassName=\"h-8 w-8 p-0 disabled:bg-[#E3E4EC]\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\ttable.toggleAllPageRowsSelected(false);\n\t\t\t\t\t\t\t\t\thandlePageIndexChange((currentPage + 1).toString());\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={currentPage === totalPage - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Go to next page</span>\n\t\t\t\t\t\t\t\t<ChevronRightIcon className=\"h-4 w-4 text-[#6C757D]\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\tclassName=\"hidden h-8 w-8 p-0 disabled:bg-[#E3E4EC] lg:flex\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\ttable.toggleAllPageRowsSelected(false);\n\t\t\t\t\t\t\t\t\thandlePageIndexChange((totalPage - 1).toString());\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={currentPage === totalPage - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Go to last page</span>\n\t\t\t\t\t\t\t\t<ChevronsRightIcon className=\"h-4 w-4 text-[#6C757D]\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{table.getFilteredSelectedRowModel().rows.length > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute bottom-0 left-0 z-40 flex w-full justify-center bg-white/80 pt-2\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex items-center gap-4 bg-primary/10 px-4 py-1\">\n\t\t\t\t\t\t<p className=\"text-nowrap text-primary text-sm\">\n\t\t\t\t\t\t\t{table.getFilteredSelectedRowModel().rows.length}\n\t\t\t\t\t\t\t件の顧問先が選択されています\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t{toastContent?.(table)}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\ttable.toggleAllPageRowsSelected(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"cursor-pointer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<XIcon className=\"h-4 w-4 text-[#6C757D]\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default CustomTable;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}