Table系のリニューアル #126

youchann · 2020-07-15T07:08:00Z

ref: https://github.com/voyagegroup/fluct_datastrap/issues/1752

youchann · 2020-07-16T09:04:44Z

memo

fullWidthか否かで、両サイドのborderおよびborder-radiusの出し分けをした
一番外側のborderを2pxにした
- overflow: hiddenを入れると<th />をstickyにできない
- 1pxだと中の要素がはみ出るので、2pxにしている状態
縦線アリのバージョンが必要か要確認

youchann · 2020-07-17T03:03:08Z

src/components/DataTable/DataTable.stories.tsx

+    table-layout: auto;
+    white-space: nowrap;


デフォルトだとtable-layout: fixed;でwhite-space: normal;だと思うのですが、理由があったりしますかね....?
特にwhite-spaceの方は改行させるとき、使う側が明示的に<br />を入れたりすると思うので、nowrapでも良いのでは??と思っています。

あーでもDSTのデータは長い文字列があるのか。。。

枠名とかがめっちゃ長いんよねw
table-layout: fixed;に関してはそうしないとwidthが聞かないはず

scrollableにする時は table-layout: auto;でいいかな

なのでDataTable的に横をscrollableにするかどうかを選べると良さそう

youchann · 2020-07-17T03:06:45Z

src/components/DataTable/DataTable.tsx

+  verticalSpacing?: VerticalSpacing;
+  fullWidth?: boolean;
+  tableMaxHeight?: string;


verticalSpacing → cellの余白を3種類で定義

fullWidth → top以外のborderおよびborder-radiusを出すか否かを制御

tableMaxHeight → 文字通りテーブルのmaxHeightを定義。<th />はデフォでsticky

youchann · 2020-07-17T03:08:08Z

src/components/DataTable/DataTable.tsx

+      <Styled.BorderContainer fullWidth={fullWidth}>
+        {!!tabs && (
+          <TableTabs
+            width={tabWidth}
+            value={currentTabIndex}
+            items={tabs.map((tab, index) => ({
+              label: tab.label,
+              value: index,
+            }))}
+            onChange={onHandleTabChange}
+          />
+        )}
+        <Styled.TableContainer maxHeight={tableMaxHeight}>


変更量多く見えるけど

�- Styled.BorderContainer

Styled.TableContainer

が加わっただけ。

youchann · 2020-07-17T03:08:41Z

src/components/DataTable/internal/CellRadio/styled.ts

+  /* TODO: 他に透明度指定する方法を聞く */
+  box-shadow: 0 4px ${colors.basic[300]}3D;


他に透明度指定する手法ありましたっけ....?

hexToRgbaみたいな関数作ったのでそれ使ってもらえると！

youchann · 2020-07-17T03:10:23Z

src/components/DataTable/internal/Table/Table.tsx

+  & th {
+    position: sticky;
+    top: 0;
+  }


デフォでsticky

意図しないとこでstickになったりしないかな

optionで渡す方が安全なきがする

tableMaxHeightpropsを渡した時にstickyにするようにします！

youchann · 2020-07-17T03:10:47Z

src/components/DataTable/internal/Table/Table.tsx

+  & > thead > tr:first-of-type > th {
+    &:first-of-type {
+      border-top-left-radius: ${Radius.SMALL};
+    }
+    &:last-of-type {
+      border-top-right-radius: ${Radius.SMALL};
+    }
+  }
+  & > tbody > tr:last-of-type > td {
+    &:first-of-type {
+      border-bottom-left-radius: ${Radius.SMALL};
+    }
+    &:last-of-type {
+      border-bottom-right-radius: ${Radius.SMALL};
+    }
+  }


角がはみ出ないようにするためのプロパティ。

kinokoruumu · 2020-07-17T09:56:28Z

src/components/DataTable/internal/CellCheckbox/styled.ts

+  padding: ${({ theme }) => theme.spacing}px
+    ${({ theme }) => theme.spacing * 2}px;
+  /* TODO: 他に透明度指定する方法を聞く */
+  box-shadow: 0 4px ${colors.basic[300]}3D;


colors使わなくていいようにしたいな...

適したpaletteがなくて、直接入れようという話をnoroさんとしたんですよねぇ...

paletteにプロパティを追加するor既存のプロパティを変えることができれば良いのですが、妙案あればぜひに。

colors.basic[300] が特に固定で書く回数多い気がするからどこかに入れれるといいね

一応issued
#129

ありがと！

kinokoruumu · 2020-07-17T09:57:06Z

src/components/DataTable/internal/SortableHeaderCell/SortableHeaderCell.tsx

          {children}
        </Typography>
        {sortable && (
-          <Styled.IconContainer>
+          <>
+            <Spacer pl={0.5} />


FragmentじゃなくてSpacerのchildrenに入れるのが良さそう

kinokoruumu · 2020-07-17T09:57:43Z

src/components/DataTable/internal/Table/Row.tsx

+export type VerticalSpacing = "small" | "medium" | "large";
+
+const verticalSpacingMap: { [key in VerticalSpacing]: string } = {
+  small: "8px",


themeのspacingを使って定義して欲しい！

kinokoruumu · 2020-07-17T09:58:54Z

src/components/DataTable/internal/Table/Table.tsx

+  & th {
+    position: sticky;
+    top: 0;
+  }


意図しないとこでstickになったりしないかな

kinokoruumu · 2020-07-17T09:59:06Z

src/components/DataTable/internal/Table/Table.tsx

+  & th {
+    position: sticky;
+    top: 0;
+  }


optionで渡す方が安全なきがする

kinokoruumu · 2020-07-17T10:04:50Z

src/components/DataTable/DataTable.stories.tsx

@@ -292,30 +321,6 @@ export const CustomCell: React.FunctionComponent = () => {
  );
 };

-export const WithStickyHeader = () => (


これはなんでなくなったんだろう？

デフォでstickyにしたからですね。

#126 (comment) をやるにあたってまた追加すると思います。

kinokoruumu · 2020-07-20T05:27:39Z

src/components/DataTable/DataTable.tsx

@@ -322,7 +322,7 @@ const DataTable = <T extends { id: number; selectDisabled?: boolean }>({
        <Styled.TableContainer maxHeight={tableMaxHeight}>


なるほど
noneが初期値なのか

kinokoruumu · 2020-07-20T05:28:31Z

src/components/DataTable/internal/Table/Row.tsx

+  & > th {
+    ${({ isStickyHeader }) =>
+      isStickyHeader
+        ? `


styled-componentsのcssを使って
isStickyHeader && css`` 的な感じで書くと良さそう

そういえばそんなAPIありましたね。。
ちょっとみておきますー

kinokoruumu · 2020-07-20T05:29:33Z

src/components/DataTable/internal/Table/Table.tsx

@@ -6,11 +6,18 @@ import { Header } from "./Header";
 import { Row } from "./Row";
 import { Radius } from "../../../../styles";

-const Container = styled.table`
+type TableProps = {
+  horizontalScrollable: boolean;


よきですね！

kinokoruumu

cssのとこ以外はLGMTです！

とりあえず<Table />を角丸にした

88c4dff

youchann self-assigned this Jul 15, 2020

youchann added 10 commits July 15, 2020 18:37

<Table />いい感じになった

24bb9fe

もっといい感じに

2871d17

とりあえずいい感じに

a6d6cd0

縦のpaddingを制御できるように

55ba9f3

tweakj

51ccdb2

tweak

77776a3

fullWidthにも対応

5ec4bf3

tweak

79f0fe6

tweak

d140d5a

tweak

22d30d0

youchann changed the title ~~WIP: Table系のリニューアル~~ Table系のリニューアル Jul 16, 2020

youchann added 5 commits July 16, 2020 18:49

tweak

58b817c

いい感じにした

e749931

tweak

9f8fe63

tweak

ce9cf5f

デフォでstickyにしたりした

169b19a

youchann commented Jul 17, 2020

View reviewed changes

youchann requested a review from kinokoruumu July 17, 2020 03:13

kinokoruumu reviewed Jul 17, 2020

View reviewed changes

youchann added 3 commits July 18, 2020 15:10

hextorgba通す

de8d508

height設定した時だけstickyにする

3427085

横スクロール可否をpropsで判定

7837dc5

youchann requested a review from kinokoruumu July 20, 2020 00:55

kinokoruumu reviewed Jul 20, 2020

View reviewed changes

kinokoruumu approved these changes Jul 20, 2020

View reviewed changes

youchann mentioned this pull request Jul 20, 2020

colors.basic[300] をpaletteにのせるか検討する #129

Closed

tweak

75788d6

youchann merged commit a859f4d into master Jul 20, 2020

youchann deleted the modify-dataTable branch July 20, 2020 07:03

hirokikondo86 pushed a commit that referenced this pull request Apr 8, 2021

Merge branch 'update-menu' into feature/#126/add-group-and-warn

1ed9bdd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table系のリニューアル #126

Table系のリニューアル #126

youchann commented Jul 15, 2020

youchann commented Jul 16, 2020

youchann Jul 17, 2020

youchann Jul 17, 2020

kinokoruumu Jul 17, 2020

youchann Jul 17, 2020

youchann Jul 17, 2020

youchann Jul 17, 2020

kinokoruumu Jul 17, 2020

youchann Jul 17, 2020

kinokoruumu Jul 17, 2020

kinokoruumu Jul 17, 2020

youchann Jul 18, 2020

youchann Jul 17, 2020

kinokoruumu Jul 17, 2020

youchann Jul 18, 2020

kinokoruumu Jul 20, 2020 •

edited

youchann Jul 20, 2020

kinokoruumu Jul 20, 2020

kinokoruumu Jul 17, 2020

kinokoruumu Jul 17, 2020

kinokoruumu Jul 17, 2020

kinokoruumu Jul 17, 2020

kinokoruumu Jul 17, 2020

youchann Jul 18, 2020

kinokoruumu Jul 20, 2020

kinokoruumu Jul 20, 2020

youchann Jul 20, 2020

kinokoruumu Jul 20, 2020

kinokoruumu left a comment

		/* TODO: 他に透明度指定する方法を聞く */
		box-shadow: 0 4px ${colors.basic[300]}3D;

		@@ -322,7 +322,7 @@ const DataTable = <T extends { id: number; selectDisabled?: boolean }>({
		<Styled.TableContainer maxHeight={tableMaxHeight}>

Table系のリニューアル #126

Table系のリニューアル #126

Conversation

youchann commented Jul 15, 2020

youchann commented Jul 16, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kinokoruumu Jul 20, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kinokoruumu left a comment

Choose a reason for hiding this comment

kinokoruumu Jul 20, 2020 •

edited