clicking

export const CharacteristicsTable = (props: CharacteristicsTableProps) => {
  const { characteristics, onRowClick, onRowDelete, onAddCharacteristic } = props;

  interface DeleteCharacteristicProps {
    index: number;
  }

  const DeleteCharacteristic = useCallback(
    (_props: DeleteCharacteristicProps) => {
      return (
        <Button
          variant="link"
          icon={<TrashIcon />}
          onClick={e => {
            e.stopPropagation();
            onRowDelete(_props.index);
          }}
        >
          &nbsp;
        </Button>
      );
    },
    [characteristics]
  );

  const rows: IRow[] = useMemo(() => {
    return characteristics.map<IRow>((c, index) => {
      return {
        cells: [
          c.name,
          <>
            <Label key={index}>{c.Attribute.length}</Label>
          </>,
          c.reasonCode,
          c.baselineScore,
          <>
            <DeleteCharacteristic key={index} index={index} />
          </>
        ]
      };
    });
  }, [characteristics]);

  const rowClickHandler = (
    event: React.MouseEvent,
    row: IRow,
    rowProps: IExtraRowData,
    computedData: IComputedData
  ) => {
    onRowClick(rowProps.rowIndex as number);
  };

  return (
    <React.Fragment>
      <Table aria-label="Characteristics" cells={columns} rows={rows}>
        <TableHeader />
        <TableBody onRowClick={rowClickHandler} />
      </Table>
      {rows.length === 0 && <EmptyStateNoCharacteristics createCharacteristic={onAddCharacteristic} />}
    </React.Fragment>
  );
};