without dry

useTableColumns.tsx

import type { ITableColumn } from "@helium10/re-ui-components";
import { useMemo } from "react";

import { useTranslation } from "../../../../i18n/useTranslation";
import { SuppliersApi } from "../../../../requests/suppliers/suppliersList";
import ISupplier = SuppliersApi.ISupplier;

import { AddressCell } from "../components/AddressCell";

export const useTableColumns = () => {
  const { t } = useTranslation();

  return useMemo<ITableColumn<ISupplier>[]>(() => {
    return [
      {
        field: "name",
        title: t("tableColumns.supplierName"),
        sortable: true,
        responsive: true,
        type: "text",
        minWidth: 1,
      },
      {
        field: "email",
        title: t("tableColumns.email"),
        sortable: true,
        responsive: true,
        type: "text",
        minWidth: 1,
      },
      {
        field: "address",
        title: t("tableColumns.address"),
        sortable: true,
        responsive: true,
        type: "text",
        minWidth: 1,
        render: (data) => (
          <AddressCell
            street1={data.street1}
            street2={data.street2}
            city={data.city}
            state={data.state}
            zip={data.zip}
          />
        ),
      },
      {
        field: "website",
        title: t("tableColumns.website"),
        sortable: true,
        responsive: true,
        type: "text",
        minWidth: 1,
      },
      {
        field: "leadTime",
        title: t("tableColumns.leadTime"),
        sortable: true,
        responsive: true,
        type: "number",
        minWidth: 1,
      },
      {
        field: "reorderFrequency",
        title: t("tableColumns.reorderFrequency"),
        sortable: true,
        responsive: true,
        type: "number",
        minWidth: 1,
      },
    ];
  }, [t]);
};