-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DataTableのrowSpan対応 #151
DataTableのrowSpan対応 #151
Conversation
columns={[ | ||
{ | ||
name: "ID", | ||
selector: (data) => data.id, | ||
}, | ||
{ | ||
name: "名前", | ||
selector: (data) => data.name, | ||
enableMergeCell: true, | ||
sortable: true, | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
column
に対してenableMergeCell
を定義することでセル結合を可能にした。
enableMergeCellがtrueとなるcolumnが存在する時
- hover時の背景色変更が無効
- sort機能が無効
となる。
そのため、セル結合をしたい場合は配列の順序をライブラリ利用者側が考慮する必要がある。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<td | ||
colSpan={ | ||
columns.length + | ||
((showCheckbox || showRadioButton) && | ||
(!showTabs || isCheckableTab(currentTabIndex, tabs)) | ||
? 1 | ||
: 0) | ||
} | ||
> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
この辺は他のソースコードに干渉せず、あまり読まれないため、return構文の中に閉じ込めた。
@maktak1995 |
function calculateRowSpan<T extends DataTableBaseData>( | ||
column: Column<T>, | ||
displayData: T[], | ||
startIndex: number, | ||
): number { | ||
if (!column.enableMergeCell) return 1; | ||
const baseRow = displayData[startIndex]; | ||
const baseCell = column.selector(baseRow); | ||
let rowSpan = 1; | ||
for (let idx = startIndex + 1; idx < displayData.length; idx++) { | ||
const comparisonRow = displayData[idx]; | ||
const comparisonCell = column.selector(comparisonRow); | ||
if (comparisonRow.id !== baseRow.id || comparisonCell !== baseCell) { | ||
break; | ||
} | ||
rowSpan++; | ||
} | ||
return rowSpan; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
selectorが同じであれば結合
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTMです!
close: #148