TableElement

import { WhopElements, Ads, Reporting, TableElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Ads /* options */>
        <Reporting>
          <TableElement onTabChanged={(e) => console.log(e)} onFilterChanged={(e) => console.log(e)} onColumnsChanged={(e) => console.log(e)} onCustomMetricsChanged={(e) => console.log(e)} onViewChanged={(e) => console.log(e)} onSourcesChanged={(e) => console.log(e)} onAttributionModelChanged={(e) => console.log(e)} />
        </Reporting>
      </Ads>
    </WhopElements>
  );
}

<script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const ads = window.WhopElements().ads.create({ /* options */ });
  const reporting = ads.create('reporting', { /* options */ });
  reporting.create('table', {
    onTabChanged: (e) => console.log(e),
    onFilterChanged: (e) => console.log(e),
    onColumnsChanged: (e) => console.log(e),
    onCustomMetricsChanged: (e) => console.log(e),
    onViewChanged: (e) => console.log(e),
    onSourcesChanged: (e) => console.log(e),
    onAttributionModelChanged: (e) => console.log(e)
  }).mount('#ads-reporting-table');
</script>