Skip to content
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

Merged
merged 9 commits into from
Aug 7, 2020
Merged

Conversation

youchann
Copy link
Contributor

@youchann youchann commented Aug 5, 2020

close: #148

@youchann youchann added the enhancement New feature or request label Aug 5, 2020
@youchann youchann self-assigned this Aug 5, 2020
@youchann youchann changed the title wip DataTableのrowSpan対応 DataTableのrowSpan対応 Aug 5, 2020
Comment on lines +122 to +132
columns={[
{
name: "ID",
selector: (data) => data.id,
},
{
name: "名前",
selector: (data) => data.name,
enableMergeCell: true,
sortable: true,
},
Copy link
Contributor Author

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が存在する時

  1. hover時の背景色変更が無効
  2. sort機能が無効

となる。

そのため、セル結合をしたい場合は配列の順序をライブラリ利用者側が考慮する必要がある。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

また、idをまたいだセル結合は行われない。
image

Comment on lines +452 to +460
<td
colSpan={
columns.length +
((showCheckbox || showRadioButton) &&
(!showTabs || isCheckableTab(currentTabIndex, tabs))
? 1
: 0)
}
>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この辺は他のソースコードに干渉せず、あまり読まれないため、return構文の中に閉じ込めた。

@youchann
Copy link
Contributor Author

youchann commented Aug 5, 2020

@maktak1995
仕様の抜け漏れ(こういう使い方できないとダメなのでは?とか、この場合エラーになるのでは?)の観点からもみていただきたく:bow:

Comment on lines +60 to +77
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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

selectorが同じであれば結合

Copy link
Contributor

@maktak1995 maktak1995 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTMです!

@youchann youchann merged commit 1bf734b into master Aug 7, 2020
@youchann youchann deleted the deal-with-rowSpan-in-DataTable branch August 7, 2020 01:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

<DataTable />で自由なレイアウト表現を可能にする
2 participants