@hortiview/shared-components 0.0.5189 → 0.0.5404

package/dist/types/GenericTable.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="react" />
+import { ListItemProps } from '@element/react-components';
+/**
+ * Props for the GenericTable component {@link GenericTable}
+ * @template T the type of the data that will be displayed in the table
+ */
+export type TableLayoutProps<T> = {
+    /**
+     * data to be displayed in the table, will be used to create the header if dataType is not provided
+     */
+    data: T[];
+    /**
+     * columns to be hidden n the table, passed as an array of column ids (keys)
+     */
+    hiddenColumns?: (keyof T)[];
+    /**
+     * order of the columns in the table, passed as an array of column ids (keys)
+     */
+    order?: (keyof T)[];
+    /**
+     * cell templates to be applied to the cells as {key: function}-Object,
+     * @example
+     * ```jsx
+     * {
+     *    Status: (props: CellTemplateProps<GenericElement>) => {
+     *        const {status} = props.row.original;
+     *        return <LabelBadge label={'Status'} themeColor={getColorForStatus(status)} />
+     *    }
+     * }
+     * ```
+     */
+    cellTemplates?: CellTemplate<T>;
+    /**
+     * top bar elements to be displayed above the table (e.g. filters)
+     * @example
+     * ```jsx
+     * [
+     *    <Button key='add' label='Add' onClick={somethingAwesome} />,
+     *    <Select onChange={somethingEvenCooler} />
+     * ]
+     * ```
+     */
+    tableActions?: JSX.Element[];
+    /**
+     * text to be displayed when no data is available
+     */
+    noContentText?: string;
+    /**
+     * whether to show pagination or not
+     */
+    pagination?: boolean;
+    /**
+     * function that will be called to translate the headers by its key
+     * @param key the key of the header to get the translation for
+     * @returns a (hopefully) translated string for the header
+     */
+    headerTranslation?: (key: string) => string;
+    /**
+     * function that will be called to get the actions for a row to be displayed as actions in a context menu
+     * @param row the row (element) that will be used in each action
+     * @returns an array of ListItemProps that will be shown as actions for the row
+     */
+    getRowActions?: (row: T) => ListItemProps[];
+};
+/**
+ * Props for the CellTemplate component {@link CellTemplate}
+ * @template T the type of the data that will be displayed in the table
+ * @example
+ * ```jsx
+ * {
+ *   Status: (props: CellTemplateProps<GenericElement>) => {
+ *      const {status} = props.row.original;
+ *     return <LabelBadge label={'Status'} themeColor={getColorForStatus(status)} />
+ *  }
+ * }
+ * ```
+ */
+export type CellTemplateProps<T> = {
+    row: {
+        original: T;
+    };
+};
+/**
+ * CellTemplate type to be used in the GenericTable component {@link GenericTable}
+ * @template T the type of the data that will be displayed in the table aka the type of the row
+ * by default the table will display all keys of the row, if you want to change the way a cell is displayed you can use this type
+ * to define a function that will be called for each cell of the given key in the row
+ * @example
+ * ```jsx
+ * {
+ *   Status: (props: CellTemplateProps<GenericElement>) => {
+ *     const {status} = props.row.original;
+ *    return <LabelBadge label={'Status'} themeColor={getColorForStatus(status)} />
+ *  }
+ * }
+ * ```
+ */
+export type CellTemplate<T> = {
+    [key in keyof T]?: (props: CellTemplateProps<T>) => JSX.Element;
+};

package/dist/types/GenericTable.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.5189",
+  "version": "0.0.5404",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",
@@ -18,7 +18,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "vite",
+    "start": "vite",
     "build": "tsc --p ./tsconfig-build.json && vite build",
     "test": "vitest",
     "test:ci": "vitest run --coverage",