portainer/app/react/kubernetes/ServicesView/ServicesDatatable/columns/targetPorts.tsx

import { CellProps, Column } from 'react-table';

import { Service } from '../../types';

export const targetPorts: Column<Service> = {
  Header: 'Target Ports',
  id: 'targetPorts',
  accessor: (row) => {
    const ports = row.Ports;
    if (!ports.length) {
      return '-';
    }
    return ports.map((port) => `${port.TargetPort}`);
  },
  Cell: ({ row }: CellProps<Service>) => {
    const ports = row.original.Ports;
    if (!ports.length) {
      return '-';
    }
    return ports.map((port, index) => <div key={index}>{port.TargetPort}</div>);
  },
  disableFilters: true,
  canHide: true,

  sortType: (rowA, rowB) => {
    const a = rowA.original.Ports;
    const b = rowB.original.Ports;

    if (!a.length && !b.length) return 0;
    if (!a.length) return 1;
    if (!b.length) return -1;

    const portA = a[0].TargetPort;
    const portB = b[0].TargetPort;

    if (portA === portB) {
      if (a.length < b.length) return -1;
      if (a.length > b.length) return 1;

      return 0;
    }

    // natural sort of the port
    return portA.localeCompare(
      portB,
      navigator.languages[0] || navigator.language,
      {
        numeric: true,
        ignorePunctuation: true,
      }
    );
  },
};