@tanstack/preact-table 9.0.0-alpha.22 → 9.0.0-alpha.26

package/dist/esm/useTable.js

@@ -1,38 +0,0 @@
-import { useState, useMemo } from "preact/hooks";
-import { constructTable } from "@tanstack/table-core";
-import { useStore, shallow } from "@tanstack/preact-store";
-import { FlexRender } from "./FlexRender.js";
-import { Subscribe } from "./Subscribe.js";
-function useTable(tableOptions, selector = () => ({})) {
-  const [table] = useState(() => {
-    const tableInstance = constructTable(tableOptions);
-    tableInstance.Subscribe = function SubscribeBound(props) {
-      return Subscribe({ ...props, table: tableInstance });
-    };
-    tableInstance.FlexRender = FlexRender;
-    return tableInstance;
-  });
-  table.setOptions((prev) => ({
-    ...prev,
-    ...tableOptions
-  }));
-  const selectorWithDataAndColumns = (state2) => ({
-    columns: tableOptions.columns,
-    data: tableOptions.data,
-    ...selector(state2)
-  });
-  const state = useStore(table.store, selectorWithDataAndColumns, {
-    equal: shallow
-  });
-  return useMemo(
-    () => ({
-      ...table,
-      state
-    }),
-    [state, table]
-  );
-}
-export {
-  useTable
-};
-//# sourceMappingURL=useTable.js.map

package/dist/esm/useTable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTable.js","sources":["../../src/useTable.ts"],"sourcesContent":["import { useMemo, useState } from 'preact/hooks'\nimport { constructTable } from '@tanstack/table-core'\nimport { shallow, useStore } from '@tanstack/preact-store'\nimport { FlexRender } from './FlexRender'\nimport { Subscribe } from './Subscribe'\nimport type {\n  CellData,\n  NoInfer,\n  RowData,\n  Table,\n  TableFeatures,\n  TableOptions,\n  TableState,\n} from '@tanstack/table-core'\nimport type { ComponentChildren } from 'preact'\nimport type { FlexRenderProps } from './FlexRender'\nimport type { SubscribeProps } from './Subscribe'\n\nexport type PreactTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n> = Table<TFeatures, TData> & {\n  /**\n   * A Preact HOC (Higher Order Component) that allows you to subscribe to the table state.\n   *\n   * This is useful for opting into state re-renders for specific parts of the table state.\n   *\n   * @example\n   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>\n   *   {({ rowSelection }) => ( // important to include `{() => {()}}` syntax\n   *     <tr key={row.id}>\n   *       // render the row\n   *     </tr>\n   *   )}\n   * </table.Subscribe>\n   */\n  Subscribe: <TSelected>(props: {\n    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected\n    children: ((state: TSelected) => ComponentChildren) | ComponentChildren\n  }) => ComponentChildren\n  /**\n   * A Preact component that renders headers, cells, or footers with custom markup.\n   * Use this utility component instead of manually calling flexRender.\n   *\n   * @example\n   * ```tsx\n   * <table.FlexRender cell={cell} />\n   * <table.FlexRender header={header} />\n   * <table.FlexRender footer={footer} />\n   * ```\n   *\n   * This replaces calling `flexRender` directly like this:\n   * ```tsx\n   * flexRender(cell.column.columnDef.cell, cell.getContext())\n   * flexRender(header.column.columnDef.header, header.getContext())\n   * flexRender(footer.column.columnDef.footer, footer.getContext())\n   * ```\n   */\n  FlexRender: <TValue extends CellData = CellData>(\n    props: FlexRenderProps<TFeatures, TData, TValue>,\n  ) => ComponentChildren\n  /**\n   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n   *\n   * @example\n   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n   *\n   * console.log(table.state.globalFilter)\n   */\n  readonly state: Readonly<TSelected> & {\n    columns: TableOptions<TFeatures, TData>['columns']\n    data: TableOptions<TFeatures, TData>['data']\n  }\n}\n\nexport function useTable<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TSelected = {},\n>(\n  tableOptions: TableOptions<TFeatures, TData>,\n  selector: (state: TableState<TFeatures>) => TSelected = () =>\n    ({}) as TSelected,\n): PreactTable<TFeatures, TData, TSelected> {\n  const [table] = useState(() => {\n    const tableInstance = constructTable(tableOptions) as PreactTable<\n      TFeatures,\n      TData,\n      TSelected\n    >\n\n    tableInstance.Subscribe = function SubscribeBound<TSelected>(\n      props: Omit<SubscribeProps<TFeatures, TData, TSelected>, 'table'>,\n    ) {\n      return Subscribe({ ...props, table: tableInstance })\n    }\n\n    tableInstance.FlexRender = FlexRender\n\n    return tableInstance\n  })\n\n  // sync table options on every render\n  table.setOptions((prev) => ({\n    ...prev,\n    ...tableOptions,\n  }))\n\n  const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({\n    columns: tableOptions.columns,\n    data: tableOptions.data,\n    ...selector(state),\n  })\n\n  const state = useStore(table.store, selectorWithDataAndColumns, {\n    equal: shallow,\n  })\n\n  return useMemo(\n    () => ({\n      ...table,\n      state,\n    }),\n    [state, table],\n  ) as PreactTable<TFeatures, TData, TSelected>\n}\n"],"names":["state"],"mappings":";;;;;AA4EO,SAAS,SAKd,cACA,WAAwD,OACrD,CAAA,IACuC;AAC1C,QAAM,CAAC,KAAK,IAAI,SAAS,MAAM;AAC7B,UAAM,gBAAgB,eAAe,YAAY;AAMjD,kBAAc,YAAY,SAAS,eACjC,OACA;AACA,aAAO,UAAU,EAAE,GAAG,OAAO,OAAO,eAAe;AAAA,IACrD;AAEA,kBAAc,aAAa;AAE3B,WAAO;AAAA,EACT,CAAC;AAGD,QAAM,WAAW,CAAC,UAAU;AAAA,IAC1B,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,EACH;AAEF,QAAM,6BAA6B,CAACA,YAAkC;AAAA,IACpE,SAAS,aAAa;AAAA,IACtB,MAAM,aAAa;AAAA,IACnB,GAAG,SAASA,MAAK;AAAA,EAAA;AAGnB,QAAM,QAAQ,SAAS,MAAM,OAAO,4BAA4B;AAAA,IAC9D,OAAO;AAAA,EAAA,CACR;AAED,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,CAAC,OAAO,KAAK;AAAA,EAAA;AAEjB;"}