Введение

Ура! ? Вы добрались до финальной части этой серии из двух частей! Если вы еще не ознакомились с Частью 1, остановитесь прямо здесь и сначала прочтите ее. Не волнуйтесь, мы подождем, пока вы вернетесь! ?

В первой части мы создали компонент CustomTable. Вы можете увидеть это в действии здесь.

Во второй части мы расширим компонент, добавив в него некоторые новые функции. Вот над чем мы будем работать:

Для поддержки этого компонент CustomTable потребует некоторых улучшений:

1. Возможность форматировать отображаемое значение — например, отображать число с правильным форматированием.
2. Гибкость, позволяющая пользователям предоставлять собственные шаблоны для отображения строк, что дает им контроль над отображением каждого столбца.

Давайте углубимся в создание первой функции.

Расширение интерфейса столбца

Мы начнем с добавления метода формата в интерфейс Column, чтобы контролировать, как определенные столбцы отображают свои значения.

interface Column {
  id: keyof T;
  label: string;
  format?: (value: string | number) => string;
}

Этот дополнительный метод форматирования будет использоваться для форматирования данных при необходимости. Давайте посмотрим, как это работает, на примере файла Country.tsx. Мы добавим метод формата в столбец населения.

const columns: Column[] = [
  { id: "name", label: "Name" },
  { id: "code", label: "ISO\u00a0Code" },
  {
    id: "population",
    label: "Population",
    format: (value) => new Intl.NumberFormat("en-US").format(value as number),
  },
  {
    id: "size",
    label: "Size\u00a0(km\u00b2)",
  },
  {
    id: "density",
    label: "Density",
  },
];

Здесь мы используем метод JavaScript Intl.NumberFormat для форматирования населения в виде числа. Подробнее об этом методе можно узнать здесь.

Далее нам нужно обновить наш компонент CustomTable, чтобы проверить наличие функции форматирования и применить ее, если она существует.

  {rows.map((row, index) => (
    
      {columns.map((column, index) => (
        
          {column.format
            ? column.format(row[column.id] as string)
            : (row[column.id] as string)}
        
      ))}
    
  ))}

Благодаря этой модификации столбец населения теперь отображается с соответствующим форматированием. Вы можете увидеть это в действии здесь.

Поддержка пользовательских шаблонов

Теперь давайте реализуем следующую функцию: разрешим использование пользовательских шаблонов для отображения столбцов. Для этого мы добавим поддержку передачи JSX в качестве дочернего реквизита или использования реквизита рендеринга, предоставляя потребителям полный контроль над тем, как отображается каждая ячейка.

Во-первых, мы расширим интерфейс Props, включив в него дополнительный дочерний реквизит.

interface Props {
  rows: T[];
  columns: Column[];
  children?: (row: T, column: Column) => React.ReactNode;
}

Далее мы изменим наш компонент CustomTable для поддержки этого нового свойства, сохранив при этом существующее поведение.

  {columns.map((column, index) => (
    
      {children
        ? children(row, column)
        : column.format
        ? column.format(row[column.id] as string)
        : row[column.id]}
    
  ))}

Это гарантирует, что если передано свойство Children, будет использоваться собственный шаблон; в противном случае мы возвращаемся к поведению по умолчанию.

Давайте также проведем рефакторинг кода, чтобы сделать его более пригодным для повторного использования:

const getFormattedValue = (column, row) => {
  const value = row[column.id];
  return column.format ? column.format(value) : value as string;
};

const getRowTemplate = (row, column, children) => {
  return children ? children(row, column) : getFormattedValue(column, row);
};

Пользовательский компонент строки

Теперь давайте создадим собственный компонент строки в файле Countrys.tsx. Мы создадим компонент CustomRow для обработки специальной логики рендеринга.

interface RowProps {
  row: Country;
  column: Column;
}

const CustomRow = ({ row, column }: RowProps) => {
  const value = row[column.id];
  if (column.format) {
    return {column.format(value as string)};
  }
  return {value};
};

Затем мы обновим Countrys.tsx, чтобы передать этот компонент CustomRow в CustomTable.

const Countries = () => (
  
    {(row, column) => }
  
);

Для People.tsx, которому не нужны какие-либо специальные шаблоны, мы можем просто отобразить таблицу без свойства Children.

const People = () => ;

Улучшения

Одним из улучшений, которые мы можем сделать, является использование индексов массива в качестве ключей, что может вызвать проблемы. Вместо этого давайте заставим использовать уникальный rowKey для каждой строки.

Мы расширим интерфейс Props, включив в него ключ rowKey.

interface Props {
  rowKey: keyof T;
  rows: T[];
  columns: Column[];
  children?: (row: T, column: Column) => React.JSX.Element | string;
  onRowClick?: (row: T) => void;
}

Теперь каждый потребитель CustomTable должен предоставить rowKey для обеспечения стабильного рендеринга.

  {(row, column) => }

Окончательный код

Полный код можно посмотреть здесь.

Заключение

В этой статье мы расширили наш пользовательский компонент CustomTable, добавив параметры форматирования и возможность передавать пользовательские шаблоны для столбцов. Эти функции дают нам больший контроль над тем, как данные отображаются в таблицах, а также делают компонент гибким и допускающим повторное использование для различных случаев использования.

Мы также улучшили компонент, внедрив свойство rowKey, чтобы избежать использования индексов массива в качестве ключей, что обеспечивает более эффективный и стабильный рендеринг.

Надеюсь, это руководство оказалось для вас полезным! Не стесняйтесь поделиться своими мыслями в разделе комментариев.

Спасибо, что остаетесь со мной на этом пути! ?