type Props<A> = { type: A };

export const FancyButton = forwardRef(function FancyButton<A>(
  { type }: Props<A>,
  ref: RefObject<HTMLButtonElement>
) {
  useImperativeHandle(ref, {
    focus: () => console.log("focus")
  });

  return (
    <button ref={ref} type={type}>
      Button
    </button>
  );
});

function Test() {
  const buttonRef = useRef(null);

  return <FancyButton<"submit"> type="submit" ref={buttonRef} />;
}

import React, { forwardRef, useImperativeHandle, useRef } from "react";

type Props<A> = {
  data: A[];
  columns: {
    title: string;
    key: keyof A;
  }[];
};
type RefHandlers = { scrollToBottom: () => void };
type TableData = { name: string; price: number };

export const Table = forwardRef(function Table<A>(
  { data, columns }: Props<A>,
  ref: RefHandlers
) {
  useImperativeHandle(ref, {
    scrollToBottom: () => {
      console.log("scrollToBottom");
    }
  });

  return (
    <table>
      {data.map((row, rowIndex) => {
        return (
          <tr key={rowIndex}>
            {columns.map((column, columnIndex) => {
              return <td key={columnIndex}>{row[column.key]}</td>;
            })}
          </tr>
        );
      })}
    </table>
  );
});

function Usage() {
  const tableRef = useRef<RefHandlers>(null);
  const columns = [
    {
      label: "Name",
      key: "name"
    },
    {
      label: "Price",
      key: "price"
    }
  ];
  const data = [
    { name: "foo", price: 100 },
    { name: "bar", price: 200 },
    { name: "baz", price: 300 }
  ];

  return <Table<TableData> ref={tableRef} data={data} columns={columns} />;
}