@trackunit/react-table 1.9.14 → 1.9.17

package/index.cjs.js

@@ -869,7 +869,84 @@ const ColumnSorting = ({ canSort, sortingState = false }) => {
  * @returns {ReactElement} Table component
  */
 /**
+ * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
+ * Table is extending the `@tanstack/react-table` Table component.
+ * For more information about the `@tanstack/react-table` Table component, visit [https://tanstack.com/table/v8/docs/guide/introduction](https://tanstack.com/table/v8/docs/guide/introduction).
+ *
+ * @example
+ * ```tsx
+ * import { createColumnHelper, Table, useTable } from "@trackunit/react-table";
+ * import { TextCell } from "@trackunit/react-table-base-components";
+ * import { useMemo } from "react";
+ *
+ * interface DataType {
+ *   id: string;
+ *   name: string;
+ *   assetType: string;
+ *   brand: string;
+ * }
+ *
+ * const MyTable = () => {
+ *   const defaultData: DataType[] = useMemo(
+ *     () => [
+ *       { id: "1", name: "SM Smoketest Asset 1", assetType: "machine", brand: "Manitou" },
+ *       { id: "2", name: "3219", assetType: "machine", brand: "Skyjack" },
+ *       { id: "3", name: "3226", assetType: "machine", brand: "Skyjack" },
+ *     ],
+ *     []
+ *   );
+ *
+ *   const columns = useMemo(() => {
+ *     const columnHelper = createColumnHelper<Partial<DataType>>();
+ *
+ *     return [
+ *       columnHelper.accessor(row => row?.name, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.name} />
+ *         ),
+ *         header: "Name",
+ *         id: "name",
+ *         size: 250,
+ *       }),
+ *       columnHelper.accessor(row => row?.assetType, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.assetType} />
+ *         ),
+ *         header: "Asset Type",
+ *         id: "assetType",
+ *       }),
+ *       columnHelper.accessor(row => row?.brand, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.brand} />
+ *         ),
+ *         header: "Brand",
+ *         id: "brand",
+ *       }),
+ *     ];
+ *   }, []);
+ *
+ *   const pagination = useMemo(
+ *     () => ({
+ *       nextPage: () => {}, // Handle next page
+ *       previousPage: () => {}, // Handle previous page
+ *       isLoading: false,
+ *       pageInfo: {
+ *         count: defaultData.length,
+ *       },
+ *     }),
+ *     [defaultData.length]
+ *   );
+ *
+ *   const { table } = useTable<Partial<DataType>>({
+ *     data: defaultData,
+ *     columns,
+ *     enableSorting: false,
+ *   });
+ *
+ *   return <Table<Partial<DataType>> {...table} pagination={pagination} />;
+ * };
  *
+ * ```
  */
 const Table = ({ rowHeight = 50, ...props }) => {
     //we need a reference to the scrolling element for logic down below

package/index.esm.js

@@ -868,7 +868,84 @@ const ColumnSorting = ({ canSort, sortingState = false }) => {
  * @returns {ReactElement} Table component
  */
 /**
+ * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
+ * Table is extending the `@tanstack/react-table` Table component.
+ * For more information about the `@tanstack/react-table` Table component, visit [https://tanstack.com/table/v8/docs/guide/introduction](https://tanstack.com/table/v8/docs/guide/introduction).
+ *
+ * @example
+ * ```tsx
+ * import { createColumnHelper, Table, useTable } from "@trackunit/react-table";
+ * import { TextCell } from "@trackunit/react-table-base-components";
+ * import { useMemo } from "react";
+ *
+ * interface DataType {
+ *   id: string;
+ *   name: string;
+ *   assetType: string;
+ *   brand: string;
+ * }
+ *
+ * const MyTable = () => {
+ *   const defaultData: DataType[] = useMemo(
+ *     () => [
+ *       { id: "1", name: "SM Smoketest Asset 1", assetType: "machine", brand: "Manitou" },
+ *       { id: "2", name: "3219", assetType: "machine", brand: "Skyjack" },
+ *       { id: "3", name: "3226", assetType: "machine", brand: "Skyjack" },
+ *     ],
+ *     []
+ *   );
+ *
+ *   const columns = useMemo(() => {
+ *     const columnHelper = createColumnHelper<Partial<DataType>>();
+ *
+ *     return [
+ *       columnHelper.accessor(row => row?.name, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.name} />
+ *         ),
+ *         header: "Name",
+ *         id: "name",
+ *         size: 250,
+ *       }),
+ *       columnHelper.accessor(row => row?.assetType, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.assetType} />
+ *         ),
+ *         header: "Asset Type",
+ *         id: "assetType",
+ *       }),
+ *       columnHelper.accessor(row => row?.brand, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.brand} />
+ *         ),
+ *         header: "Brand",
+ *         id: "brand",
+ *       }),
+ *     ];
+ *   }, []);
+ *
+ *   const pagination = useMemo(
+ *     () => ({
+ *       nextPage: () => {}, // Handle next page
+ *       previousPage: () => {}, // Handle previous page
+ *       isLoading: false,
+ *       pageInfo: {
+ *         count: defaultData.length,
+ *       },
+ *     }),
+ *     [defaultData.length]
+ *   );
+ *
+ *   const { table } = useTable<Partial<DataType>>({
+ *     data: defaultData,
+ *     columns,
+ *     enableSorting: false,
+ *   });
+ *
+ *   return <Table<Partial<DataType>> {...table} pagination={pagination} />;
+ * };
  *
+ * ```
  */
 const Table = ({ rowHeight = 50, ...props }) => {
     //we need a reference to the scrolling element for logic down below

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.9.14",
+  "version": "1.9.17",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,14 +14,14 @@
     "react-dnd-html5-backend": "16.0.1",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.12.13",
-    "@trackunit/shared-utils": "1.11.9",
-    "@trackunit/css-class-variance-utilities": "1.9.9",
-    "@trackunit/ui-icons": "1.9.9",
-    "@trackunit/react-table-base-components": "1.9.13",
-    "@trackunit/react-form-components": "1.10.13",
-    "@trackunit/i18n-library-translation": "1.9.12",
-    "@trackunit/iris-app-runtime-core-api": "1.9.12",
+    "@trackunit/react-components": "1.13.2",
+    "@trackunit/shared-utils": "1.11.12",
+    "@trackunit/css-class-variance-utilities": "1.9.12",
+    "@trackunit/ui-icons": "1.9.12",
+    "@trackunit/react-table-base-components": "1.9.16",
+    "@trackunit/react-form-components": "1.10.16",
+    "@trackunit/i18n-library-translation": "1.9.15",
+    "@trackunit/iris-app-runtime-core-api": "1.9.15",
     "graphql": "^16.10.0"
   },
   "module": "./index.esm.js",

package/src/Table.d.ts

@@ -24,6 +24,83 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
  * @returns {ReactElement} Table component
  */
 /**
+ * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
+ * Table is extending the `@tanstack/react-table` Table component.
+ * For more information about the `@tanstack/react-table` Table component, visit [https://tanstack.com/table/v8/docs/guide/introduction](https://tanstack.com/table/v8/docs/guide/introduction).
+ *
+ * @example
+ * ```tsx
+ * import { createColumnHelper, Table, useTable } from "@trackunit/react-table";
+ * import { TextCell } from "@trackunit/react-table-base-components";
+ * import { useMemo } from "react";
+ *
+ * interface DataType {
+ *   id: string;
+ *   name: string;
+ *   assetType: string;
+ *   brand: string;
+ * }
+ *
+ * const MyTable = () => {
+ *   const defaultData: DataType[] = useMemo(
+ *     () => [
+ *       { id: "1", name: "SM Smoketest Asset 1", assetType: "machine", brand: "Manitou" },
+ *       { id: "2", name: "3219", assetType: "machine", brand: "Skyjack" },
+ *       { id: "3", name: "3226", assetType: "machine", brand: "Skyjack" },
+ *     ],
+ *     []
+ *   );
+ *
+ *   const columns = useMemo(() => {
+ *     const columnHelper = createColumnHelper<Partial<DataType>>();
+ *
+ *     return [
+ *       columnHelper.accessor(row => row?.name, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.name} />
+ *         ),
+ *         header: "Name",
+ *         id: "name",
+ *         size: 250,
+ *       }),
+ *       columnHelper.accessor(row => row?.assetType, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.assetType} />
+ *         ),
+ *         header: "Asset Type",
+ *         id: "assetType",
+ *       }),
+ *       columnHelper.accessor(row => row?.brand, {
+ *         cell: ({ row: { original } }: { row: { original: Partial<DataType> } }) => (
+ *           <TextCell content={original?.brand} />
+ *         ),
+ *         header: "Brand",
+ *         id: "brand",
+ *       }),
+ *     ];
+ *   }, []);
+ *
+ *   const pagination = useMemo(
+ *     () => ({
+ *       nextPage: () => {}, // Handle next page
+ *       previousPage: () => {}, // Handle previous page
+ *       isLoading: false,
+ *       pageInfo: {
+ *         count: defaultData.length,
+ *       },
+ *     }),
+ *     [defaultData.length]
+ *   );
+ *
+ *   const { table } = useTable<Partial<DataType>>({
+ *     data: defaultData,
+ *     columns,
+ *     enableSorting: false,
+ *   });
+ *
+ *   return <Table<Partial<DataType>> {...table} pagination={pagination} />;
+ * };
  *
+ * ```
  */
 export declare const Table: <TData extends object>({ rowHeight, ...props }: TableProps<TData>) => ReactElement;