文字数制限と制限超過した場合は三点リーダ表示をした。（truncate関数あり）

上のスクリーンショットは、文字列が5でmaxlengthになるように指定した。

index.tsx

function truncate(str: string, len: number) {
  return str.length <= len ? str : `${str.substring(0, len)}...`;
}
const maxLength = 5;

同一のファイルの中で、適応させたい配列にtruncateとmaxLengthをかけるようにした。

index.tsx

format: ({ value }) => truncate(value, maxLength)

これは他の場所でも使っていきたいのでJSXタグとして機能するようにした。

index.tsx from Truncate

type Props = {
  str: string;
  len: number;
};
/**
 * @package
 */
export default function Truncate({ str, len }: Props) {
  return str.length <= len ? str : `${str.substring(0, len)}...`;
}

使用例：

format: ({ value }) => <Truncate str={value} len={maxLength} />