function JapaneseTable2024({ tableData }) { return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 bg-[#F0F0F0]", __source: { fileName: "", lineNumber: 3, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-[#FFFFFF] shadow-md rounded-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 5, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 6, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-[#333333] uppercase tracking-wider", __source: { fileName: "", lineNumber: 7, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", __source: { fileName: "", lineNumber: 8, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-[#333333] uppercase tracking-wider", __source: { fileName: "", lineNumber: 10, columnNumber: 25 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-[#333333] uppercase tracking-wider", __source: { fileName: "", lineNumber: 13, columnNumber: 25 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-[#333333] uppercase tracking-wider", __source: { fileName: "", lineNumber: 16, columnNumber: 25 }, __self: this }, "居住都道府県"), /*#__PURE__*/ React.createElement(QualificationsHeader, { text: "所有資格", __source: { fileName: "", lineNumber: 19, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-[#333333] uppercase tracking-wider", __source: { fileName: "", lineNumber: 20, columnNumber: 25 }, __self: this }, "最終ログイン日時"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-[#333333] uppercase tracking-wider", __source: { fileName: "", lineNumber: 23, columnNumber: 25 }, __self: this }, "編集"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, tableData.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b bg-[#FFFFFF]", __source: { fileName: "", lineNumber: 30, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 31, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `checkbox-${index}`, __source: { fileName: "", lineNumber: 32, columnNumber: 33 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 34, columnNumber: 29 }, __self: this }, row.name), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 37, columnNumber: 29 }, __self: this }, row.gender), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 40, columnNumber: 29 }, __self: this }, row.prefecture), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 43, columnNumber: 29 }, __self: this }, row.qualification), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 46, columnNumber: 29 }, __self: this }, row.lastLogin), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 49, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 hover:text-blue-900", name: `edit-${index}`, __source: { fileName: "", lineNumber: 50, columnNumber: 33 }, __self: this }, "編集"))))))); } function JapaneseTable2024Story() { const sampleData = [ { name: "山田太郎", gender: "男性", prefecture: "東京都", qualification: "資格A", lastLogin: "2023/10/01 10:00" }, { name: "佐藤花子", gender: "女性", prefecture: "大阪府", qualification: "資格B", lastLogin: "2023/10/02 11:30" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseTable2024, { tableData: sampleData, __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this })); } function QualificationsHeader({ text }) { return /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function QualificationsHeaderStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(QualificationsHeader, { text: "所有資格", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }))))); } function MainComponent() { const getRandomElement = (array)=>array[Math.floor(Math.random() * array.length)]; const generateRandomDate = ()=>new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toLocaleString('ja-JP'); const names = [ "山田太郎", "佐藤花子", "鈴木次郎", "高橋三郎", "田中四郎" ]; const genders = [ "男性", "女性" ]; const prefectures = [ "東京都", "大阪府", "北海道", "福岡県", "愛知県" ]; const qualifications = [ "資格A", "資格B", "資格C", "資格D", "資格E" ]; const tableData = [ ...Array.from({ length: 5 }) ].map(()=>({ name: getRandomElement(names), gender: getRandomElement(genders), prefecture: getRandomElement(prefectures), qualification: getRandomElement(qualifications), lastLogin: generateRandomDate() })); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseTable2024, { tableData: tableData, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })); }

氏名	性別	居住都道府県	所有資格	最終ログイン日時
山田太郎	男性	愛知県	資格B	2025/11/13 6:23:09
佐藤花子	男性	愛知県	資格D	2025/11/25 19:15:09
佐藤花子	女性	北海道	資格A	2025/10/11 3:03:25
鈴木次郎	女性	大阪府	資格A	2025/11/13 13:27:13
鈴木次郎	男性	大阪府	資格A	2025/10/2 17:46:24