DataTableを初期Sort設定をPropで受け取れるようにする

[maktak1995]

close #32

• Propsに defaultSortField と defaultSortOrder を追加
• 関連する処理を追加

[youchann]

export type Column<T, C> = {
  name: C;
  selector: (data: T) => string | number;
  sortable?: boolean;
  width?: string;
  renderCell?: (data: T) => React.ReactNode;
  align?: TypographyProps["align"];
};

type Tab<T> = {
  label: string;
  filter: (data: T[]) => T[];
  disabledCheck?: boolean;
};

type Props<T, C> = {
  data: T[];
  columns: Column<T, C>[];
  enablePagination?: boolean;
  onSelectRowsChange?: (rows: number[]) => void;
  onRadioChange?: (radio: number) => void;
  clearSelectedRows?: boolean;
  tabs?: Tab<T>[];
  tabWidth?: string; // tabsがある時のみ有効
  emptyTitle?: string;
  emptySubtitle?: string;
  per?: number; // perが指定されている場合、初期値がそれに強制されます
  defaultSortField?: C;
  defaultSortOrder?: "desc" | "asc";
};

// idを必須にしたい
const DataTable = <
  T extends { id: number; selectDisabled?: boolean },
  C extends string
>({
  data: sourceData,
  columns,
  enablePagination = false,
  onSelectRowsChange,
  onRadioChange,
  clearSelectedRows,
  tabs,
  tabWidth,
  emptyTitle,
  emptySubtitle,
  per,
  defaultSortField,
  defaultSortOrder,
}: Props<T, C>) => {

これで型がいい感じになったんだけれど、もっと良い方法募集中:thinking:

[youchann]

ちょっと難易度高いのですが、ぜひやってみてほしいです!!

[youchann]

一箇所でしか使われていないので、変数化しなくても良さそうですね!!

あるいはコンポーネント外で関数化するか。。

[youchann]

こんな感じの方がスリムですね

  const onSetFirstSortableColumn = (defaultSortField?: string) => {
    const selectedColumn = columns.find(
      (column) => column.name === defaultSortField,
    );
    return selectedColumn?.sortable
      ? selectedColumn
      : columns.find((column) => column.sortable === true);
  };

[youchann]

#80 (comment)
↑みたいに型を絞る(欲を言えばsortableなcolumnのnameだけを入れれるようにする)みたいなやり方ができないか、少し調べてみてほしいです!!

※無理だったらstring型のままで、

こんな感じの方がスリムですね

の実装でOKです。

[maktak1995]

やってみます！

[maktak1995]

いろいろ調べてみましたがいい感じの方法が見つからなかったので、

こんな感じの方がスリムですね

の実装のみとさせてください mm

[youchann]

全然大丈夫です！:+1:

[youchann]

この辺思ったのですが、

export const useOrderState = <T>(defaultState: CurrentSortState<T>) =>
  React.useState<CurrentSortState<T>>(defaultState);

↑の方がわかりやすい気がしません?(相談)

[maktak1995]

@yutaro1031
たしかにsort側のコードはシンプルになってわかりやすくなりますが、こうするとDataTableで利用するときに

  const [sortState, setSortState] = useOrderState<T>({
    isDesc: defaultSortOrder === "desc",
    name: firstSortableColumn ? firstSortableColumn.name : "",
    getValue: firstSortableColumn ? firstSortableColumn.selector : undefined,
  });

という感じに引数をオブジェクトにまとめてから渡すことになりますよね。

この形であればそれぞれの引数の意味がわかるので可読性はあがるのはいいと思うんですけど、useOrderState を使う側が CurrentSortState の形式をわかっていないといけなくなりますよね。
importしてDataTableのなかで型定義に使ってますし、そこは気にしなくてもいいでしょうか？

[maktak1995]

こっちのやりかたでいきますね

[kinokoruumu]

今だと初期値がuseOrderStateに依存してるので、

Suggested change

	defaultSortOrder,
	defaultSortOrder = "desc",

とした方が読みやすそう

[maktak1995]

たしかにそうですね！修正します

[youchann]

LGTMです！！

コメした部分の変更は任せます。(どちらでも変わらないはず)