MyTable.tsx

import { ComponentProps } from "preact";
import { useEffect, useRef } from "preact/hooks";
import "ojs/ojtable";
import { ojTable } from "ojs/ojtable";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

type Movie = {
  id: number;
  overview: string;
  title: string;
  poster_path: string;
  release_date: string;
};

type TableProps = ComponentProps<"oj-table">;

const columnDefaultProps: TableProps["columnsDefault"] = {
  sortable: "disabled",
};

const accessibilityProps: TableProps["accessibility"] = { rowHeader: "title" };

const apiKey = "your API key goes here";

const serviceUrl =
  "https://api.themoviedb.org/3/movie/now_playing?api_key=" + apiKey;

const basePosterUrl = "https://image.tmdb.org/t/p/w154";

const movieColumnDef: Array<ojTable.Column<Movie["id"], Movie>> = [
  {
    headerText: "Poster",
    field: "poster_path",
    id: "poster-path",
    minWidth: "15%",
    template: "poster",
  },
  {
    headerText: "Title",
    field: "title",
    id: "title",
    className: "demo-title-layout",
    sortable: "enabled",
  },
  {
    headerText: "Overview",
    field: "overview",
    id: "overview",
    maxWidth: "50%",
    className: "demo-overview-layout",
  },
  {
    headerText: "Release Date",
    field: "release_date",
    id: "release-date",
    className: "demo-release-date-layout",
    sortable: "enabled",
  },
];
const handleSelectedChanged = (
  event: ojTable.selectedChanged<Movie["id"], Movie>
) => {};

const posterTemplate = (
  cell: ojTable.CellTemplateContext<Movie["id"], Movie>
) => {
  return (
    <>
      <img src={basePosterUrl + cell.item.data.poster_path} />
    </>
  );
};

export function MyTable() {
  const movieDP = useRef(
    new MutableArrayDataProvider<Movie["id"], Movie>([], {
      keyAttributes: "id",
    })
  );

  useEffect(() => {
    fetch(serviceUrl)
      .then((response) => response.json())
      .then((result) => {
        movieDP.current.data = result.results;
      });
  }, []);

  return (
    <oj-table
      id="movie-table"
      aria-label="Currently Playing Movies"
      accessibility={accessibilityProps}
      class="demo-table-container"
      data={movieDP.current}
      onselectedChanged={handleSelectedChanged}
      columnsDefault={columnDefaultProps}
      columns={movieColumnDef}>
      <template slot="poster" render={posterTemplate}></template>
    </oj-table>
  );
}