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",
      },
      {
        field: "email",
      },
      {
        field: "address",
        render: (data: ISupplier) => (
          <AddressCell
            street1={data.street1}
            street2={data.street2}
            city={data.city}
            state={data.state}
            zip={data.zip}
          />
        ),
      },
      {
        field: "website",
      },
      {
        field: "leadTime",
        type: "number",
      },
      {
        field: "reorderFrequency",
        type: "number",
      },
    ].map(
      (col) =>
        ({
          title: t(`tableColumns.${col.field}`),
          sortable: true,
          responsive: true,
          minWidth: 1,
          type: "text",
          ...col,
        }) as ITableColumn<ISupplier>,
    );
  }, [t]);
};