@godxjp/ui 20.0.0 → 20.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -2
- package/dist/app/theme-axes.d.ts +2 -0
- package/dist/app/theme-axes.js +45 -0
- package/dist/components/charts/chart-cartesian.d.ts +2 -1
- package/dist/components/charts/chart-cartesian.js +52 -3
- package/dist/components/charts/chart-category-axis.d.ts +55 -0
- package/dist/components/charts/chart-category-axis.js +93 -0
- package/dist/components/charts/chart-frame.d.ts +10 -1
- package/dist/components/charts/chart-frame.js +19 -3
- package/dist/components/charts/compact-bar-trend.d.ts +1 -1
- package/dist/components/charts/compact-bar-trend.js +2 -0
- package/dist/components/charts/pie-chart.d.ts +1 -1
- package/dist/components/charts/pie-chart.js +12 -1
- package/dist/components/charts/recharts-peer.d.ts +49 -0
- package/dist/components/charts/recharts-peer.js +45 -0
- package/dist/components/data-display/card.d.ts +12 -1
- package/dist/components/data-display/card.js +22 -4
- package/dist/components/data-display/code-block.js +6 -2
- package/dist/components/data-display/data-table.d.ts +39 -4
- package/dist/components/data-display/data-table.js +802 -270
- package/dist/components/data-display/descriptions.d.ts +27 -6
- package/dist/components/data-display/descriptions.js +58 -17
- package/dist/components/data-display/index.d.ts +2 -0
- package/dist/components/data-display/index.js +2 -0
- package/dist/components/data-display/list-row.d.ts +10 -1
- package/dist/components/data-display/list-row.js +7 -1
- package/dist/components/data-display/popover.d.ts +2 -2
- package/dist/components/data-display/popover.js +61 -11
- package/dist/components/data-display/range-timeline.d.ts +38 -0
- package/dist/components/data-display/range-timeline.js +161 -0
- package/dist/components/data-display/scroll-area.js +13 -2
- package/dist/components/data-display/service-launcher-card.js +10 -10
- package/dist/components/data-display/table.d.ts +11 -3
- package/dist/components/data-display/table.js +48 -18
- package/dist/components/data-display/tree-list.js +4 -9
- package/dist/components/data-entry/calendar.d.ts +2 -2
- package/dist/components/data-entry/calendar.js +12 -1
- package/dist/components/data-entry/cascader.d.ts +1 -1
- package/dist/components/data-entry/cascader.js +188 -24
- package/dist/components/data-entry/color-picker.d.ts +1 -1
- package/dist/components/data-entry/color-picker.js +17 -5
- package/dist/components/data-entry/control-appearance.d.ts +64 -0
- package/dist/components/data-entry/control-appearance.js +39 -0
- package/dist/components/data-entry/control-surface.d.ts +61 -0
- package/dist/components/data-entry/control-surface.js +39 -0
- package/dist/components/data-entry/date-picker.d.ts +1 -1
- package/dist/components/data-entry/date-picker.js +344 -113
- package/dist/components/data-entry/date-range-picker.d.ts +1 -1
- package/dist/components/data-entry/date-range-picker.js +278 -140
- package/dist/components/data-entry/form-field.d.ts +1 -1
- package/dist/components/data-entry/form-field.js +39 -4
- package/dist/components/data-entry/form.d.ts +4 -0
- package/dist/components/data-entry/form.js +4 -2
- package/dist/components/data-entry/index.d.ts +7 -3
- package/dist/components/data-entry/index.js +10 -1
- package/dist/components/data-entry/input-otp.d.ts +1 -1
- package/dist/components/data-entry/input.d.ts +12 -34
- package/dist/components/data-entry/input.js +92 -24
- package/dist/components/data-entry/month-picker.d.ts +1 -1
- package/dist/components/data-entry/month-picker.js +47 -10
- package/dist/components/data-entry/month-range-picker.d.ts +1 -1
- package/dist/components/data-entry/month-range-picker.js +51 -11
- package/dist/components/data-entry/number-input.d.ts +7 -0
- package/dist/components/data-entry/number-input.js +147 -98
- package/dist/components/data-entry/password-input.d.ts +1 -1
- package/dist/components/data-entry/radio.d.ts +1 -1
- package/dist/components/data-entry/radio.js +61 -13
- package/dist/components/data-entry/search-input.d.ts +1 -1
- package/dist/components/data-entry/search-input.js +16 -2
- package/dist/components/data-entry/search-select.d.ts +2 -2
- package/dist/components/data-entry/search-select.js +209 -78
- package/dist/components/data-entry/select.d.ts +22 -4
- package/dist/components/data-entry/select.js +215 -163
- package/dist/components/data-entry/slider.d.ts +9 -1
- package/dist/components/data-entry/slider.js +87 -9
- package/dist/components/data-entry/switch.d.ts +3 -0
- package/dist/components/data-entry/switch.js +29 -3
- package/dist/components/data-entry/textarea.d.ts +14 -56
- package/dist/components/data-entry/textarea.js +80 -33
- package/dist/components/data-entry/time-picker.d.ts +2 -2
- package/dist/components/data-entry/time-picker.js +333 -109
- package/dist/components/data-entry/time-range-picker.d.ts +5 -0
- package/dist/components/data-entry/time-range-picker.js +89 -0
- package/dist/components/data-entry/transfer.d.ts +1 -1
- package/dist/components/data-entry/transfer.js +86 -28
- package/dist/components/data-entry/tree-select.d.ts +1 -1
- package/dist/components/data-entry/tree-select.js +201 -113
- package/dist/components/data-entry/tree-utils.js +7 -14
- package/dist/components/data-entry/upload-files.d.ts +2 -0
- package/dist/components/data-entry/upload-files.js +31 -0
- package/dist/components/data-entry/upload-request.d.ts +4 -0
- package/dist/components/data-entry/upload-request.js +53 -0
- package/dist/components/data-entry/upload-types.d.ts +28 -0
- package/dist/components/data-entry/upload-types.js +2 -0
- package/dist/components/data-entry/upload.d.ts +2 -2
- package/dist/components/data-entry/upload.js +475 -115
- package/dist/components/feedback/dialog.js +16 -19
- package/dist/components/general/button.d.ts +1 -1
- package/dist/components/general/button.js +5 -1
- package/dist/components/general/index.d.ts +1 -0
- package/dist/components/general/index.js +2 -0
- package/dist/components/general/typography.d.ts +3 -0
- package/dist/components/general/typography.js +15 -1
- package/dist/components/general/visually-hidden.d.ts +3 -0
- package/dist/components/general/visually-hidden.js +9 -0
- package/dist/components/layout/app-launcher.d.ts +34 -0
- package/dist/components/layout/app-launcher.js +228 -0
- package/dist/components/layout/app-shell.d.ts +2 -0
- package/dist/components/layout/app-shell.js +20 -7
- package/dist/components/layout/breadcrumb.d.ts +14 -2
- package/dist/components/layout/breadcrumb.js +46 -4
- package/dist/components/layout/flex.d.ts +1 -1
- package/dist/components/layout/flex.js +23 -2
- package/dist/components/layout/index.d.ts +3 -0
- package/dist/components/layout/index.js +5 -1
- package/dist/components/layout/org-switcher.js +20 -1
- package/dist/components/layout/page-container.d.ts +1 -1
- package/dist/components/layout/page-container.js +5 -3
- package/dist/components/layout/responsive-grid.d.ts +16 -2
- package/dist/components/layout/responsive-grid.js +29 -2
- package/dist/components/layout/topbar-item.d.ts +3 -0
- package/dist/components/layout/topbar-item.js +18 -3
- package/dist/components/layout/topbar.d.ts +1 -1
- package/dist/components/layout/topbar.js +27 -6
- package/dist/components/navigation/dropdown-menu.d.ts +30 -2
- package/dist/components/navigation/dropdown-menu.js +68 -11
- package/dist/components/navigation/pagination.d.ts +2 -2
- package/dist/components/navigation/pagination.js +155 -83
- package/dist/components/navigation/steps.d.ts +2 -2
- package/dist/components/navigation/steps.js +29 -4
- package/dist/components/navigation/tabs.d.ts +5 -33
- package/dist/components/navigation/tabs.js +232 -64
- package/dist/components/ui/input-otp.d.ts +26 -28
- package/dist/components/ui/input-otp.js +50 -7
- package/dist/components/ui/password-input.d.ts +36 -2
- package/dist/components/ui/password-input.js +27 -7
- package/dist/components/ui/rating.d.ts +25 -0
- package/dist/components/ui/rating.js +67 -27
- package/dist/components/ui/segmented.d.ts +9 -0
- package/dist/components/ui/segmented.js +17 -2
- package/dist/components/ui/separator.d.ts +4 -0
- package/dist/components/ui/separator.js +13 -0
- package/dist/components/ui/tag-input.d.ts +45 -0
- package/dist/components/ui/tag-input.js +109 -27
- package/dist/form/form-context.d.ts +29 -0
- package/dist/form/form-context.js +44 -4
- package/dist/form/form-field-array.d.ts +22 -0
- package/dist/form/form-field-array.js +50 -0
- package/dist/form/form-field-control.d.ts +2 -1
- package/dist/form/form-field-control.js +116 -40
- package/dist/form/form-root.d.ts +2 -1
- package/dist/form/form-root.js +142 -23
- package/dist/form/index.d.ts +3 -1
- package/dist/form/index.js +12 -1
- package/dist/i18n/messages/en.json +56 -5
- package/dist/i18n/messages/ja.json +56 -5
- package/dist/i18n/messages/vi.json +56 -5
- package/dist/inertia/index.d.ts +20 -0
- package/dist/inertia/index.js +60 -1
- package/dist/lib/control-styles.d.ts +25 -3
- package/dist/lib/control-styles.js +9 -3
- package/dist/lib/datetime/picker-format.d.ts +8 -0
- package/dist/lib/datetime/picker-format.js +54 -0
- package/dist/props/components/charts.prop.d.ts +21 -0
- package/dist/props/components/data-display.prop.d.ts +55 -4
- package/dist/props/components/data-entry.prop.d.ts +687 -43
- package/dist/props/components/form.prop.d.ts +142 -4
- package/dist/props/components/general.prop.d.ts +17 -1
- package/dist/props/components/index.d.ts +2 -2
- package/dist/props/components/layout.prop.d.ts +163 -6
- package/dist/props/components/navigation.prop.d.ts +113 -3
- package/dist/props/registry.d.ts +376 -10
- package/dist/props/registry.js +493 -9
- package/dist/props/vocabulary/data.prop.d.ts +179 -1
- package/dist/props/vocabulary/index.d.ts +4 -4
- package/dist/props/vocabulary/interaction.prop.d.ts +51 -2
- package/dist/props/vocabulary/navigation.prop.d.ts +40 -0
- package/dist/props/vocabulary/shared.prop.d.ts +33 -0
- package/dist/styles/badge-layout.css +2 -1
- package/dist/styles/card-layout.css +26 -4
- package/dist/styles/chart-layout.css +15 -0
- package/dist/styles/control.css +515 -14
- package/dist/styles/data-display-layout.css +241 -6
- package/dist/styles/data-entry-layout.css +13 -0
- package/dist/styles/layout.css +221 -4
- package/dist/styles/navigation-layout.css +227 -0
- package/dist/styles/shell-layout.css +229 -5
- package/dist/styles/table-layout.css +95 -6
- package/dist/styles/text-layout.css +5 -0
- package/dist/tokens/base.css +1 -0
- package/dist/tokens/components/badge.css +1 -0
- package/dist/tokens/components/chart.css +6 -0
- package/dist/tokens/components/control.css +79 -2
- package/dist/tokens/components/data-display.css +9 -0
- package/dist/tokens/components/descriptions.css +11 -0
- package/dist/tokens/components/flex.css +8 -0
- package/dist/tokens/components/navigation.css +55 -0
- package/dist/tokens/components/shell.css +50 -2
- package/dist/tokens/components/table.css +14 -0
- package/dist/tokens/semantic/layout.css +9 -0
- package/docs/CONSUMER-RULES.md +13 -0
- package/docs/DESIGN-AUTHORITY.md +43 -6
- package/docs/DEVELOPMENT.md +4 -3
- package/docs/FORMS.md +151 -6
- package/docs/FRAME-COVERAGE-REPORT.md +29 -16
- package/docs/README.md +1 -1
- package/docs/STANDARDS-vocabulary-tokens.md +1 -1
- package/docs/TESTING.md +15 -6
- package/docs/charts/cjk-category-axis.tsx +81 -0
- package/docs/data-display/card/index.tsx +22 -0
- package/docs/data-display/data-table/examples/antd-parity.tsx +257 -0
- package/docs/data-display/data-table/index.tsx +23 -0
- package/docs/data-display/descriptions.tsx +41 -0
- package/docs/data-display/scroll-area.tsx +31 -25
- package/docs/data-display/table.tsx +104 -45
- package/docs/data-display/timeline.tsx +41 -0
- package/docs/data-entry/date-picker.tsx +85 -0
- package/docs/data-entry/date-range-picker.tsx +26 -0
- package/docs/data-entry/form-dynamic-fields.tsx +199 -0
- package/docs/data-entry/form.tsx +74 -4
- package/docs/data-entry/input-otp.tsx +24 -0
- package/docs/data-entry/input.tsx +46 -1
- package/docs/data-entry/month-range-picker.tsx +1 -1
- package/docs/data-entry/select.tsx +27 -0
- package/docs/data-entry/switch.tsx +41 -0
- package/docs/data-entry/textarea.tsx +38 -0
- package/docs/data-entry/time-picker.tsx +85 -1
- package/docs/data-entry/time-range-picker.tsx +55 -0
- package/docs/data-entry/transfer.tsx +17 -0
- package/docs/data-entry/upload.tsx +56 -12
- package/docs/feedback/tooltip.tsx +1 -1
- package/docs/general/activity.tsx +2 -2
- package/docs/general/button/index.tsx +14 -1
- package/docs/general/typography.tsx +14 -1
- package/docs/layout/app-launcher.tsx +151 -0
- package/docs/layout/app-shell.tsx +11 -0
- package/docs/layout/flex.tsx +50 -0
- package/docs/layout/responsive-grid.tsx +21 -1
- package/docs/layout/topbar.tsx +5 -9
- package/docs/navigation/app-setting-picker.tsx +11 -0
- package/docs/navigation/breadcrumb.tsx +48 -0
- package/docs/navigation/dropdown-menu.tsx +21 -0
- package/docs/navigation/pagination.tsx +52 -0
- package/docs/navigation/steps.tsx +37 -0
- package/docs/navigation/tabs.tsx +97 -1
- package/docs/query/button-refetch.tsx +1 -0
- package/package.json +19 -2
- package/scripts/_agent-setup.mjs +19 -2
- package/scripts/init-guinea-pig.mjs +26 -4
- package/scripts/ui-audit.mjs +243 -30
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
Card,
|
|
5
|
+
CardContent,
|
|
6
|
+
Badge,
|
|
7
|
+
DataTable,
|
|
8
|
+
Descriptions,
|
|
9
|
+
TableCell,
|
|
10
|
+
TableRow,
|
|
11
|
+
type ColumnDef,
|
|
12
|
+
} from "@godxjp/ui/data-display";
|
|
13
|
+
import { Text } from "@godxjp/ui/general";
|
|
14
|
+
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* DataTable / Descriptions — the Ant Design 6.6.2 parity surface on one screen: frozen columns
|
|
18
|
+
* (`fixed`), truncation (`ellipsis`), multi-column sort (`sorter.multiple`), header filters
|
|
19
|
+
* (`filters` + `onFilter`), the full `rowSelection` object, `expandable` detail rows, a `summary`
|
|
20
|
+
* totals row, a `scroll` envelope and a bordered `Descriptions` on a responsive column ladder.
|
|
21
|
+
*
|
|
22
|
+
* It is also the MEASUREMENT surface: the frozen columns and the scroll envelope are geometry, and
|
|
23
|
+
* geometry is verified against this page in a browser, not by eye.
|
|
24
|
+
*/
|
|
25
|
+
type Line = {
|
|
26
|
+
id: string;
|
|
27
|
+
code: string;
|
|
28
|
+
partner: string;
|
|
29
|
+
note: string;
|
|
30
|
+
status: "active" | "pending" | "failed";
|
|
31
|
+
region: string;
|
|
32
|
+
owner: string;
|
|
33
|
+
updated: string;
|
|
34
|
+
amount: number;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const STATUS_TONE = { active: "success", pending: "warning", failed: "destructive" } as const;
|
|
38
|
+
const STATUS_LABEL = { active: "有効", pending: "保留", failed: "失敗" } as const;
|
|
39
|
+
|
|
40
|
+
const BASE_ROWS: Line[] = [
|
|
41
|
+
{
|
|
42
|
+
id: "L-1",
|
|
43
|
+
code: "INV-0312",
|
|
44
|
+
partner: "株式会社ベトヤ",
|
|
45
|
+
note: "四月分の請求。検収は完了しているが振込確認が未了のため保留にしている。",
|
|
46
|
+
status: "active",
|
|
47
|
+
region: "関東",
|
|
48
|
+
owner: "田中",
|
|
49
|
+
updated: "2024-04-12",
|
|
50
|
+
amount: 482000,
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
id: "L-2",
|
|
54
|
+
code: "INV-0311",
|
|
55
|
+
partner: "ハノイ物流",
|
|
56
|
+
note: "越境輸送分。通関書類の差し替えを依頼済み。",
|
|
57
|
+
status: "pending",
|
|
58
|
+
region: "海外",
|
|
59
|
+
owner: "佐藤",
|
|
60
|
+
updated: "2024-04-11",
|
|
61
|
+
amount: 128400,
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
id: "L-3",
|
|
65
|
+
code: "INV-0310",
|
|
66
|
+
partner: "GMO決済",
|
|
67
|
+
note: "決済手数料。月次で自動計上される。",
|
|
68
|
+
status: "active",
|
|
69
|
+
region: "関東",
|
|
70
|
+
owner: "田中",
|
|
71
|
+
updated: "2024-04-10",
|
|
72
|
+
amount: 64800,
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
id: "L-4",
|
|
76
|
+
code: "INV-0309",
|
|
77
|
+
partner: "東京ロジ",
|
|
78
|
+
note: "再送分。前回の請求が差し戻されたため再発行している。",
|
|
79
|
+
status: "failed",
|
|
80
|
+
region: "関東",
|
|
81
|
+
owner: "鈴木",
|
|
82
|
+
updated: "2024-04-09",
|
|
83
|
+
amount: 312000,
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
id: "L-5",
|
|
87
|
+
code: "INV-0308",
|
|
88
|
+
partner: "大阪商事",
|
|
89
|
+
note: "年間契約の四半期按分。",
|
|
90
|
+
status: "pending",
|
|
91
|
+
region: "関西",
|
|
92
|
+
owner: "鈴木",
|
|
93
|
+
updated: "2024-04-08",
|
|
94
|
+
amount: 900500,
|
|
95
|
+
},
|
|
96
|
+
];
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Enough rows for the `scroll.y` envelope to actually bite — five rows never reach an 18rem cap,
|
|
100
|
+
* and a cap that never clips proves nothing.
|
|
101
|
+
*/
|
|
102
|
+
const ROWS: Line[] = [
|
|
103
|
+
...BASE_ROWS,
|
|
104
|
+
...BASE_ROWS.map((row, i) => ({
|
|
105
|
+
...row,
|
|
106
|
+
id: `${row.id}-b`,
|
|
107
|
+
code: `INV-02${String(10 + i).padStart(2, "0")}`,
|
|
108
|
+
updated: `2024-03-${String(10 + i).padStart(2, "0")}`,
|
|
109
|
+
})),
|
|
110
|
+
];
|
|
111
|
+
|
|
112
|
+
const yen = new Intl.NumberFormat("ja-JP", {
|
|
113
|
+
style: "currency",
|
|
114
|
+
currency: "JPY",
|
|
115
|
+
maximumFractionDigits: 0,
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
const columns: ColumnDef<Line>[] = [
|
|
119
|
+
// Frozen to the inline start — the identity column stays put while the grid scrolls.
|
|
120
|
+
{ key: "code", header: "伝票番号", fixed: "start", width: "150px", sorter: { multiple: 2 } },
|
|
121
|
+
{ key: "partner", header: "取引先", width: "220px" },
|
|
122
|
+
// One line, truncated, with the full text kept as the cell's title.
|
|
123
|
+
{ key: "note", header: "備考", ellipsis: true, width: "260px" },
|
|
124
|
+
{
|
|
125
|
+
key: "status",
|
|
126
|
+
header: "状態",
|
|
127
|
+
width: "140px",
|
|
128
|
+
filters: [
|
|
129
|
+
{ text: "有効", value: "active" },
|
|
130
|
+
{ text: "保留", value: "pending" },
|
|
131
|
+
{ text: "失敗", value: "failed" },
|
|
132
|
+
],
|
|
133
|
+
onFilter: (value, row) => row.status === value,
|
|
134
|
+
render: (row) => <Badge tone={STATUS_TONE[row.status]}>{STATUS_LABEL[row.status]}</Badge>,
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
key: "region",
|
|
138
|
+
header: "地域",
|
|
139
|
+
width: "140px",
|
|
140
|
+
filters: [
|
|
141
|
+
{ text: "関東", value: "関東" },
|
|
142
|
+
{ text: "関西", value: "関西" },
|
|
143
|
+
{ text: "海外", value: "海外" },
|
|
144
|
+
],
|
|
145
|
+
filterMultiple: false,
|
|
146
|
+
onFilter: (value, row) => row.region === value,
|
|
147
|
+
},
|
|
148
|
+
{ key: "owner", header: "担当", width: "140px", sorter: { multiple: 1 } },
|
|
149
|
+
{
|
|
150
|
+
key: "updated",
|
|
151
|
+
header: "更新日",
|
|
152
|
+
width: "160px",
|
|
153
|
+
sorter: true,
|
|
154
|
+
sortDirections: ["desc", "asc"],
|
|
155
|
+
},
|
|
156
|
+
// Frozen to the inline end — the amount stays readable at any scroll position.
|
|
157
|
+
{
|
|
158
|
+
key: "amount",
|
|
159
|
+
header: "金額",
|
|
160
|
+
align: "right",
|
|
161
|
+
fixed: "end",
|
|
162
|
+
width: "160px",
|
|
163
|
+
sorter: (a, b) => a.amount - b.amount,
|
|
164
|
+
render: (row) => yen.format(row.amount),
|
|
165
|
+
},
|
|
166
|
+
];
|
|
167
|
+
|
|
168
|
+
export default function AntdParityDemo() {
|
|
169
|
+
const [selected, setSelected] = useState<string[]>([]);
|
|
170
|
+
|
|
171
|
+
return (
|
|
172
|
+
<PageContainer title="Ant Design パリティ" subtitle="DataTable / Descriptions">
|
|
173
|
+
<Flex direction="col" gap="lg">
|
|
174
|
+
<Card>
|
|
175
|
+
<CardContent flush>
|
|
176
|
+
<DataTable
|
|
177
|
+
data={ROWS}
|
|
178
|
+
columns={columns}
|
|
179
|
+
getRowId={(row) => row.id}
|
|
180
|
+
bordered
|
|
181
|
+
showSorterTooltip
|
|
182
|
+
scroll={{ x: 1400, y: "18rem" }}
|
|
183
|
+
sticky
|
|
184
|
+
rowSelection={{
|
|
185
|
+
selectedRowKeys: selected,
|
|
186
|
+
onChange: (keys) => {
|
|
187
|
+
setSelected(keys);
|
|
188
|
+
},
|
|
189
|
+
selections: true,
|
|
190
|
+
getCheckboxProps: (row) => ({ disabled: row.status === "failed" }),
|
|
191
|
+
preserveSelectedRowKeys: true,
|
|
192
|
+
}}
|
|
193
|
+
expandable={{
|
|
194
|
+
expandedRowRender: (row) => (
|
|
195
|
+
<Descriptions bordered columns={{ sm: 2, lg: 3 }} layout="horizontal">
|
|
196
|
+
<Descriptions.Item label="伝票番号" mono>
|
|
197
|
+
{row.code}
|
|
198
|
+
</Descriptions.Item>
|
|
199
|
+
<Descriptions.Item label="担当">{row.owner}</Descriptions.Item>
|
|
200
|
+
<Descriptions.Item label="地域">{row.region}</Descriptions.Item>
|
|
201
|
+
<Descriptions.Item label="備考" span="filled">
|
|
202
|
+
{row.note}
|
|
203
|
+
</Descriptions.Item>
|
|
204
|
+
</Descriptions>
|
|
205
|
+
),
|
|
206
|
+
rowExpandable: (row) => row.status !== "failed",
|
|
207
|
+
}}
|
|
208
|
+
summary={(rows) => (
|
|
209
|
+
<TableRow>
|
|
210
|
+
<TableCell />
|
|
211
|
+
<TableCell />
|
|
212
|
+
<TableCell>合計</TableCell>
|
|
213
|
+
<TableCell />
|
|
214
|
+
<TableCell />
|
|
215
|
+
<TableCell />
|
|
216
|
+
<TableCell />
|
|
217
|
+
<TableCell />
|
|
218
|
+
<TableCell>
|
|
219
|
+
{yen.format(rows.reduce((sum, row) => sum + row.amount, 0))}
|
|
220
|
+
</TableCell>
|
|
221
|
+
</TableRow>
|
|
222
|
+
)}
|
|
223
|
+
onRow={(row) => ({ "data-row-key": row.id })}
|
|
224
|
+
>
|
|
225
|
+
<DataTable.Toolbar>
|
|
226
|
+
<DataTable.Search />
|
|
227
|
+
<Flex direction="row" gap="sm" align="center">
|
|
228
|
+
<DataTable.ViewOptions />
|
|
229
|
+
<DataTable.DensityToggle />
|
|
230
|
+
</Flex>
|
|
231
|
+
</DataTable.Toolbar>
|
|
232
|
+
<DataTable.Content />
|
|
233
|
+
<DataTable.Pagination />
|
|
234
|
+
</DataTable>
|
|
235
|
+
</CardContent>
|
|
236
|
+
</Card>
|
|
237
|
+
|
|
238
|
+
<Card>
|
|
239
|
+
<CardContent>
|
|
240
|
+
<Text size="sm" tone="muted">
|
|
241
|
+
選択中: {selected.length} 件
|
|
242
|
+
</Text>
|
|
243
|
+
<Descriptions bordered columns={{ sm: 2, lg: 4 }}>
|
|
244
|
+
<Descriptions.Item label="伝票数">{ROWS.length}</Descriptions.Item>
|
|
245
|
+
<Descriptions.Item label="通貨">JPY</Descriptions.Item>
|
|
246
|
+
<Descriptions.Item label="期間">2024-04-08 ~ 2024-04-12</Descriptions.Item>
|
|
247
|
+
<Descriptions.Item label="ステータス">確定前</Descriptions.Item>
|
|
248
|
+
<Descriptions.Item label="メモ" span="filled">
|
|
249
|
+
Ant Design 6.6.2 の `bordered` と `column` レスポンシブ指定をそのまま受ける。
|
|
250
|
+
</Descriptions.Item>
|
|
251
|
+
</Descriptions>
|
|
252
|
+
</CardContent>
|
|
253
|
+
</Card>
|
|
254
|
+
</Flex>
|
|
255
|
+
</PageContainer>
|
|
256
|
+
);
|
|
257
|
+
}
|
|
@@ -117,6 +117,29 @@ export default function Demo() {
|
|
|
117
117
|
subtitle="sortable · selectable · bulk actions · row actions · loading · clickable rows · empty state"
|
|
118
118
|
>
|
|
119
119
|
<Flex direction="col" gap="lg">
|
|
120
|
+
<Flex direction="col" gap="sm" id="text-action-width">
|
|
121
|
+
<Text weight="medium">日本語の行アクション</Text>
|
|
122
|
+
<DataTable
|
|
123
|
+
preset="action-collection"
|
|
124
|
+
columns={[
|
|
125
|
+
{ key: "partner", header: "取引先" },
|
|
126
|
+
{ key: "date", header: "期限日", width: "104px" },
|
|
127
|
+
{
|
|
128
|
+
key: "action",
|
|
129
|
+
header: "操作",
|
|
130
|
+
priority: "actions",
|
|
131
|
+
width: "104px",
|
|
132
|
+
render: () => (
|
|
133
|
+
<Button size="sm" variant="ghost">
|
|
134
|
+
対応する
|
|
135
|
+
</Button>
|
|
136
|
+
),
|
|
137
|
+
},
|
|
138
|
+
]}
|
|
139
|
+
data={invoices}
|
|
140
|
+
getRowId={(row) => row.id}
|
|
141
|
+
/>
|
|
142
|
+
</Flex>
|
|
120
143
|
{/* Primary: sorted (amount desc), one row preselected, clickable rows,
|
|
121
144
|
controlled density (comfortable), kebab row actions, pagination footer. */}
|
|
122
145
|
<DataTable
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
CardTitle,
|
|
8
8
|
Descriptions,
|
|
9
9
|
} from "@godxjp/ui/data-display";
|
|
10
|
+
import type { CSSProperties } from "react";
|
|
10
11
|
import { Text } from "@godxjp/ui/general";
|
|
11
12
|
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
12
13
|
|
|
@@ -137,6 +138,46 @@ export default function Demo() {
|
|
|
137
138
|
</Descriptions>
|
|
138
139
|
</CardContent>
|
|
139
140
|
</Card>
|
|
141
|
+
|
|
142
|
+
{/* ── The RULED property panel (gh#414) ─────────────────────────────
|
|
143
|
+
Two token knobs, both OFF by default, turn a horizontal Descriptions into the ruled
|
|
144
|
+
panel a detail page usually wants. They exist so a service stops hand-rolling a
|
|
145
|
+
`<Flex className="min-h-10 border-b">` row: the label column, the gaps and the value
|
|
146
|
+
type step were already Descriptions'; only the rule and the band height were missing.
|
|
147
|
+
The row gap goes to 0 in the same declaration — the gap is the space BETWEEN rules, so
|
|
148
|
+
leaving it would draw detached hairlines instead of a ruled list. */}
|
|
149
|
+
<Card>
|
|
150
|
+
<CardHeader>
|
|
151
|
+
<CardTitle level={2}>案件の詳細 · ruled rows</CardTitle>
|
|
152
|
+
<CardDescription>
|
|
153
|
+
一行ごとに罫線を引いた属性パネル。--descriptions-row-border と
|
|
154
|
+
--descriptions-row-min-height をテーマで一度設定するだけで、コンポーネントは同じです。
|
|
155
|
+
</CardDescription>
|
|
156
|
+
</CardHeader>
|
|
157
|
+
{/* The knobs are declared on the CARD BODY, not on the grid: custom properties inherit,
|
|
158
|
+
so one scope re-tunes every Descriptions inside it — which is how a service theme
|
|
159
|
+
would set them (once, globally), not per call site. */}
|
|
160
|
+
<CardContent
|
|
161
|
+
style={
|
|
162
|
+
{
|
|
163
|
+
"--descriptions-row-border": "1px solid hsl(var(--border))",
|
|
164
|
+
"--descriptions-row-min-height": "var(--band-height-lg)",
|
|
165
|
+
"--descriptions-row-gap": "0px",
|
|
166
|
+
} as CSSProperties
|
|
167
|
+
}
|
|
168
|
+
>
|
|
169
|
+
<Descriptions columns={1} layout="horizontal">
|
|
170
|
+
<Descriptions.Item label="案件名">2026年度 基幹システム更改</Descriptions.Item>
|
|
171
|
+
<Descriptions.Item label="担当">山田 太郎</Descriptions.Item>
|
|
172
|
+
<Descriptions.Item label="状態">
|
|
173
|
+
<Badge status="active" />
|
|
174
|
+
</Descriptions.Item>
|
|
175
|
+
<Descriptions.Item label="契約ID" mono>
|
|
176
|
+
CT-2026-0088
|
|
177
|
+
</Descriptions.Item>
|
|
178
|
+
</Descriptions>
|
|
179
|
+
</CardContent>
|
|
180
|
+
</Card>
|
|
140
181
|
</Flex>
|
|
141
182
|
</PageContainer>
|
|
142
183
|
);
|
|
@@ -11,12 +11,12 @@ import {
|
|
|
11
11
|
ScrollBar,
|
|
12
12
|
} from "@godxjp/ui/data-display";
|
|
13
13
|
import { Button, Text } from "@godxjp/ui/general";
|
|
14
|
-
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
14
|
+
import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* ScrollArea — custom scrollbar container. ALWAYS set an explicit height/max-height
|
|
18
18
|
* (vertical) or width (horizontal) on the wrapper or the scrollbar never appears.
|
|
19
|
-
* `type` controls when the bar is visible; `
|
|
19
|
+
* `type` controls when the bar is visible; `ScrollArea orientation="horizontal"`
|
|
20
20
|
* adds a horizontal bar. Composed only from real @godxjp/ui components.
|
|
21
21
|
*/
|
|
22
22
|
const entries = Array.from(
|
|
@@ -244,31 +244,37 @@ export default function Demo() {
|
|
|
244
244
|
|
|
245
245
|
<Card>
|
|
246
246
|
<CardHeader>
|
|
247
|
-
<CardTitle level={2}>
|
|
248
|
-
|
|
249
|
-
</CardTitle>
|
|
250
|
-
<CardDescription>
|
|
251
|
-
横方向のバーは明示的に ScrollBar
|
|
252
|
-
を子要素として配置します。中身は幅を指定して溢れさせます。
|
|
253
|
-
</CardDescription>
|
|
247
|
+
<CardTitle level={2}>ScrollArea</CardTitle>
|
|
248
|
+
<CardDescription>orientation="horizontal"</CardDescription>
|
|
254
249
|
</CardHeader>
|
|
255
250
|
<CardContent>
|
|
256
|
-
<
|
|
257
|
-
<
|
|
258
|
-
|
|
259
|
-
<
|
|
260
|
-
<
|
|
261
|
-
{
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
251
|
+
<ScrollArea orientation="horizontal" type="always">
|
|
252
|
+
<ResponsiveGrid flow="columns">
|
|
253
|
+
{columns.map((column) => (
|
|
254
|
+
<Card key={column}>
|
|
255
|
+
<CardContent solo>
|
|
256
|
+
<Text tabular>{column}</Text>
|
|
257
|
+
</CardContent>
|
|
258
|
+
</Card>
|
|
259
|
+
))}
|
|
260
|
+
</ResponsiveGrid>
|
|
261
|
+
</ScrollArea>
|
|
262
|
+
</CardContent>
|
|
263
|
+
</Card>
|
|
264
|
+
|
|
265
|
+
<Card>
|
|
266
|
+
<CardHeader>
|
|
267
|
+
<CardTitle level={2}>個別の ScrollBar を追加する</CardTitle>
|
|
268
|
+
</CardHeader>
|
|
269
|
+
<CardContent>
|
|
270
|
+
<ScrollArea type="always">
|
|
271
|
+
<ResponsiveGrid flow="columns">
|
|
272
|
+
{columns.map((column) => (
|
|
273
|
+
<Text key={column}>{column}</Text>
|
|
274
|
+
))}
|
|
275
|
+
</ResponsiveGrid>
|
|
276
|
+
<ScrollBar orientation="horizontal" />
|
|
277
|
+
</ScrollArea>
|
|
272
278
|
</CardContent>
|
|
273
279
|
</Card>
|
|
274
280
|
|
|
@@ -46,31 +46,31 @@ export default function Demo() {
|
|
|
46
46
|
<TableHeader>
|
|
47
47
|
<TableRow>
|
|
48
48
|
<TableHead>勘定科目</TableHead>
|
|
49
|
-
<TableHead
|
|
50
|
-
<TableHead
|
|
49
|
+
<TableHead align="end">借方</TableHead>
|
|
50
|
+
<TableHead align="end">貸方</TableHead>
|
|
51
51
|
</TableRow>
|
|
52
52
|
</TableHeader>
|
|
53
53
|
<TableBody>
|
|
54
54
|
<TableRow>
|
|
55
55
|
<TableCell>売掛金</TableCell>
|
|
56
|
-
<TableCell
|
|
57
|
-
<TableCell
|
|
56
|
+
<TableCell numeric>¥482,000</TableCell>
|
|
57
|
+
<TableCell align="end">—</TableCell>
|
|
58
58
|
</TableRow>
|
|
59
59
|
{/* Built-in selected-row state — data-[state=selected]:bg-primary/[0.06]. */}
|
|
60
60
|
<TableRow data-state="selected">
|
|
61
61
|
<TableCell>売上高</TableCell>
|
|
62
|
-
<TableCell
|
|
63
|
-
<TableCell
|
|
62
|
+
<TableCell align="end">—</TableCell>
|
|
63
|
+
<TableCell numeric>¥438,182</TableCell>
|
|
64
64
|
</TableRow>
|
|
65
65
|
<TableRow>
|
|
66
66
|
<TableCell>仮受消費税</TableCell>
|
|
67
|
-
<TableCell
|
|
68
|
-
<TableCell
|
|
67
|
+
<TableCell align="end">—</TableCell>
|
|
68
|
+
<TableCell numeric>¥43,818</TableCell>
|
|
69
69
|
</TableRow>
|
|
70
70
|
<TableRow className="font-medium">
|
|
71
71
|
<TableCell>合計</TableCell>
|
|
72
|
-
<TableCell
|
|
73
|
-
<TableCell
|
|
72
|
+
<TableCell numeric>¥482,000</TableCell>
|
|
73
|
+
<TableCell numeric>¥482,000</TableCell>
|
|
74
74
|
</TableRow>
|
|
75
75
|
</TableBody>
|
|
76
76
|
</Table>
|
|
@@ -90,41 +90,41 @@ export default function Demo() {
|
|
|
90
90
|
<TableHeader>
|
|
91
91
|
<TableRow>
|
|
92
92
|
<TableHead>勘定科目</TableHead>
|
|
93
|
-
<TableHead
|
|
94
|
-
<TableHead
|
|
95
|
-
<TableHead
|
|
96
|
-
<TableHead
|
|
97
|
-
<TableHead
|
|
98
|
-
<TableHead
|
|
99
|
-
<TableHead
|
|
100
|
-
<TableHead
|
|
101
|
-
<TableHead
|
|
93
|
+
<TableHead align="end">1月</TableHead>
|
|
94
|
+
<TableHead align="end">2月</TableHead>
|
|
95
|
+
<TableHead align="end">3月</TableHead>
|
|
96
|
+
<TableHead align="end">4月</TableHead>
|
|
97
|
+
<TableHead align="end">5月</TableHead>
|
|
98
|
+
<TableHead align="end">6月</TableHead>
|
|
99
|
+
<TableHead align="end">7月</TableHead>
|
|
100
|
+
<TableHead align="end">8月</TableHead>
|
|
101
|
+
<TableHead align="end">9月</TableHead>
|
|
102
102
|
</TableRow>
|
|
103
103
|
</TableHeader>
|
|
104
104
|
<TableBody>
|
|
105
105
|
<TableRow>
|
|
106
106
|
<TableCell>売上高</TableCell>
|
|
107
|
-
<TableCell
|
|
108
|
-
<TableCell
|
|
109
|
-
<TableCell
|
|
110
|
-
<TableCell
|
|
111
|
-
<TableCell
|
|
112
|
-
<TableCell
|
|
113
|
-
<TableCell
|
|
114
|
-
<TableCell
|
|
115
|
-
<TableCell
|
|
107
|
+
<TableCell numeric>¥412,000</TableCell>
|
|
108
|
+
<TableCell numeric>¥438,182</TableCell>
|
|
109
|
+
<TableCell numeric>¥455,900</TableCell>
|
|
110
|
+
<TableCell numeric>¥471,300</TableCell>
|
|
111
|
+
<TableCell numeric>¥482,000</TableCell>
|
|
112
|
+
<TableCell numeric>¥499,540</TableCell>
|
|
113
|
+
<TableCell numeric>¥510,200</TableCell>
|
|
114
|
+
<TableCell numeric>¥528,770</TableCell>
|
|
115
|
+
<TableCell numeric>¥541,090</TableCell>
|
|
116
116
|
</TableRow>
|
|
117
117
|
<TableRow>
|
|
118
118
|
<TableCell>売上原価</TableCell>
|
|
119
|
-
<TableCell
|
|
120
|
-
<TableCell
|
|
121
|
-
<TableCell
|
|
122
|
-
<TableCell
|
|
123
|
-
<TableCell
|
|
124
|
-
<TableCell
|
|
125
|
-
<TableCell
|
|
126
|
-
<TableCell
|
|
127
|
-
<TableCell
|
|
119
|
+
<TableCell numeric>¥206,000</TableCell>
|
|
120
|
+
<TableCell numeric>¥219,091</TableCell>
|
|
121
|
+
<TableCell numeric>¥227,950</TableCell>
|
|
122
|
+
<TableCell numeric>¥235,650</TableCell>
|
|
123
|
+
<TableCell numeric>¥241,000</TableCell>
|
|
124
|
+
<TableCell numeric>¥249,770</TableCell>
|
|
125
|
+
<TableCell numeric>¥255,100</TableCell>
|
|
126
|
+
<TableCell numeric>¥264,385</TableCell>
|
|
127
|
+
<TableCell numeric>¥270,545</TableCell>
|
|
128
128
|
</TableRow>
|
|
129
129
|
</TableBody>
|
|
130
130
|
</Table>
|
|
@@ -150,23 +150,23 @@ export default function Demo() {
|
|
|
150
150
|
<TableRow>
|
|
151
151
|
<TableHead>倉庫</TableHead>
|
|
152
152
|
<TableHead>伝票番号</TableHead>
|
|
153
|
-
<TableHead
|
|
153
|
+
<TableHead align="end">個数</TableHead>
|
|
154
154
|
</TableRow>
|
|
155
155
|
</TableHeader>
|
|
156
156
|
<TableBody>
|
|
157
157
|
<TableRow>
|
|
158
158
|
<TableCell rowSpan={2}>東京第一</TableCell>
|
|
159
159
|
<TableCell>SH-2026-0412</TableCell>
|
|
160
|
-
<TableCell
|
|
160
|
+
<TableCell numeric>18</TableCell>
|
|
161
161
|
</TableRow>
|
|
162
162
|
<TableRow>
|
|
163
163
|
<TableCell>SH-2026-0413</TableCell>
|
|
164
|
-
<TableCell
|
|
164
|
+
<TableCell numeric>6</TableCell>
|
|
165
165
|
</TableRow>
|
|
166
166
|
<TableRow>
|
|
167
167
|
<TableCell>大阪南</TableCell>
|
|
168
168
|
<TableCell>SH-2026-0414</TableCell>
|
|
169
|
-
<TableCell
|
|
169
|
+
<TableCell numeric>24</TableCell>
|
|
170
170
|
</TableRow>
|
|
171
171
|
</TableBody>
|
|
172
172
|
</Table>
|
|
@@ -187,14 +187,14 @@ export default function Demo() {
|
|
|
187
187
|
<TableRow>
|
|
188
188
|
<TableHead>倉庫</TableHead>
|
|
189
189
|
<TableHead>伝票番号</TableHead>
|
|
190
|
-
<TableHead
|
|
190
|
+
<TableHead align="end">個数</TableHead>
|
|
191
191
|
</TableRow>
|
|
192
192
|
</TableHeader>
|
|
193
193
|
<TableBody>
|
|
194
194
|
<TableRow>
|
|
195
195
|
<TableCell>東京第一</TableCell>
|
|
196
196
|
<TableCell>SH-2026-0412</TableCell>
|
|
197
|
-
<TableCell
|
|
197
|
+
<TableCell numeric>18</TableCell>
|
|
198
198
|
</TableRow>
|
|
199
199
|
</TableBody>
|
|
200
200
|
</Table>
|
|
@@ -217,14 +217,73 @@ export default function Demo() {
|
|
|
217
217
|
<TableRow>
|
|
218
218
|
<TableHead>倉庫</TableHead>
|
|
219
219
|
<TableHead>伝票番号</TableHead>
|
|
220
|
-
<TableHead
|
|
220
|
+
<TableHead align="end">個数</TableHead>
|
|
221
221
|
</TableRow>
|
|
222
222
|
</TableHeader>
|
|
223
223
|
<TableBody>
|
|
224
224
|
<TableRow>
|
|
225
225
|
<TableCell>東京第一</TableCell>
|
|
226
226
|
<TableCell>SH-2026-0412</TableCell>
|
|
227
|
-
<TableCell
|
|
227
|
+
<TableCell numeric>18</TableCell>
|
|
228
|
+
</TableRow>
|
|
229
|
+
</TableBody>
|
|
230
|
+
</Table>
|
|
231
|
+
</CardContent>
|
|
232
|
+
</Card>
|
|
233
|
+
|
|
234
|
+
{/* ── The COLUMN AXES (gh#410) ──────────────────────────────────────
|
|
235
|
+
align · numeric · wrap · width. Every one of these was a className before, and the
|
|
236
|
+
alignment utility the catalog recommended was a physical direction this package lints
|
|
237
|
+
against. `wrap` is the one that is not cosmetic: a cell is `white-space: nowrap` by
|
|
238
|
+
default (right for a data grid) and that inherits into everything it holds, so a
|
|
239
|
+
free-text column can never break without it. */}
|
|
240
|
+
<Card>
|
|
241
|
+
<CardHeader>
|
|
242
|
+
<CardTitle level={2}>問い合わせ一覧 · column axes</CardTitle>
|
|
243
|
+
<CardDescription>
|
|
244
|
+
`width` fixes the id and status columns; the free-text subject takes `wrap` so a long
|
|
245
|
+
Japanese title breaks inside its cell instead of stretching the table into a scroll;
|
|
246
|
+
the count column takes `numeric`, which is tabular figures and end alignment as one
|
|
247
|
+
concept, and the status column takes `align="center"`.
|
|
248
|
+
</CardDescription>
|
|
249
|
+
</CardHeader>
|
|
250
|
+
<CardContent flush>
|
|
251
|
+
<Table>
|
|
252
|
+
<TableHeader>
|
|
253
|
+
<TableRow>
|
|
254
|
+
<TableHead width="7rem">受付番号</TableHead>
|
|
255
|
+
<TableHead wrap>件名</TableHead>
|
|
256
|
+
<TableHead width="6rem" align="center">
|
|
257
|
+
状態
|
|
258
|
+
</TableHead>
|
|
259
|
+
<TableHead width="5rem" numeric>
|
|
260
|
+
返信
|
|
261
|
+
</TableHead>
|
|
262
|
+
</TableRow>
|
|
263
|
+
</TableHeader>
|
|
264
|
+
<TableBody>
|
|
265
|
+
<TableRow>
|
|
266
|
+
<TableCell>INQ-2026-0188</TableCell>
|
|
267
|
+
<TableCell wrap>
|
|
268
|
+
請求書の宛名を法人名から屋号に変更したいのですが、過去分もまとめて再発行できますか
|
|
269
|
+
</TableCell>
|
|
270
|
+
<TableCell align="center">対応中</TableCell>
|
|
271
|
+
<TableCell numeric>3</TableCell>
|
|
272
|
+
</TableRow>
|
|
273
|
+
<TableRow>
|
|
274
|
+
<TableCell>INQ-2026-0189</TableCell>
|
|
275
|
+
<TableCell wrap>
|
|
276
|
+
ログイン時の二要素認証コードが届かない端末があるため、SMS
|
|
277
|
+
から認証アプリへ切り替える手順を知りたい
|
|
278
|
+
</TableCell>
|
|
279
|
+
<TableCell align="center">未対応</TableCell>
|
|
280
|
+
<TableCell numeric>0</TableCell>
|
|
281
|
+
</TableRow>
|
|
282
|
+
<TableRow>
|
|
283
|
+
<TableCell>INQ-2026-0190</TableCell>
|
|
284
|
+
<TableCell wrap>API のレート制限について</TableCell>
|
|
285
|
+
<TableCell align="center">完了</TableCell>
|
|
286
|
+
<TableCell numeric>12</TableCell>
|
|
228
287
|
</TableRow>
|
|
229
288
|
</TableBody>
|
|
230
289
|
</Table>
|