Custom Cells

function CustomCellRenderer({ rowId, colId, rowData, data, setData }) {
  return (
    <div className="p-1.5">
      <button
        type="button"
        className="rounded-sm cursor-pointer"
        onClick={() =>
          window
            .open(`https://google.com/search?q=${rowData.name}`, "_blank")
            .focus()
        }
      >
        Search Google
      </button>
    </div>
  );
}

export default CustomCellRenderer;

import Table from "rowstack";
import CustomCellRenderer from "./CustomCell";

const data = [
  {
    id: 0,
    name: "Uriel Russo",
    email: "dolor.vitae@icloud.ca",
    tags: "one,two",
  },
  {
    id: 1,
    name: "Priscilla Whitehead",
    email: "egestas.aliquam@icloud.ca",
  },
  {
    id: 2,
    name: "Mariam Christensen",
    email: "lectus@google.com",
  },
  {
    id: 3,
    name: "Elizabeth Hoffman",
    email: "tellus.nunc@google.ca",
  },
  {
    id: 4,
    name: "Zelda Hess",
    email: "phasellus.libero.mauris@icloud.ca",
  },
];

const columns = [
  {
    id: "name",
    name: "Name",
  },
  {
    id: "email",
    name: "Email",
  },
  {
    id: "tags",
    name: "Tags",
    type: "multiSelect",
    options: [
      {
        name: "One",
        value: "one",
        color: "#fecaca",
      },
      {
        name: "Two",
        value: "two",
        color: "#fed7aa",
      },
    ],
  },
  {
    id: "custom",
    name: "Search Google",
    type: "custom",
    renderer: CustomCellRenderer,
  },
];

export default function App() {
  return (
    <div
      style={{
        maxWidth: "100%",
        maxHeight: "100%",
        width: 800,
        height: 600,
        border: "1px solid #ccc",
      }}
    >
      <Table data={data} columns={columns} />
    </div>
  );
}