@bsol-oss/react-datatable5 7.6.3 → 8.0.0

package/dist/index.d.ts

@@ -119,7 +119,20 @@ declare module "@tanstack/react-table" {
 }
 interface DataTableProps<TData = unknown> {
     children?: ReactNode | ReactNode[];
+    /**
+     * Data array for the table.
+     *
+     * It will pass into as the data in `@tanstack/react-table`
+     *
+     */
     data: TData[];
+    /**
+     * Column definitions for the table.
+     *
+     * It will pass into as the column definitions in `@tanstack/react-table`
+     *
+     * @link https://tanstack.com/table/latest/docs/guide/column-defs
+     */
     columns: ColumnDef<TData, unknown>[];
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
@@ -142,6 +155,16 @@ interface DataTableProps<TData = unknown> {
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
 }
+/**
+ * DataTable will create a context to hold all values to
+ * help the render of the DataTable in serverside
+ *
+ *
+ * The query is required to be a GET request that can receive
+ * specified params and return a specified response
+ *
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
+ */
 declare function DataTable<TData = unknown>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface DataTableDefaultState {
@@ -205,6 +228,13 @@ declare const useDataTableServer: <TData>({ url, default: { sorting: defaultSort
 
 interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
     children: ReactNode | ReactNode[];
+    /**
+     * Column definitions for the table.
+     *
+     * It will pass into as the column definitions in `@tanstack/react-table`
+     *
+     * @link https://tanstack.com/table/latest/docs/guide/column-defs
+     */
     columns: ColumnDef<TData>[];
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
@@ -228,6 +258,17 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
     query: UseQueryResult<TData>;
     url: string;
 }
+/**
+ * DataTableServer will create a context to hold all values to
+ * help the render of the DataTable in serverside
+ *
+ * The query is required to be a GET request that can receive
+ * specified params and return a specified response
+ *
+ * The `useDataTableServer` can help to create the specified request and response
+ *
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
+ */
 declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableBodyProps {

package/dist/index.js

@@ -2605,11 +2605,12 @@ const snakeToLabel = (str) => {
 };
 
 const RecordDisplay = ({ object, boxProps }) => {
+    console.log(object, "dkfos");
     if (object === null) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
     }
-    return (jsxRuntime.jsx(react.Grid, { rowGap: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: snakeToLabel(field) }), jsxRuntime.jsx(react.Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }, field));
+    return (jsxRuntime.jsx(react.Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
+            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: snakeToLabel(field) }), typeof value === "object" ? (jsxRuntime.jsx(RecordDisplay, { object: value })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, field));
         }) }));
 };
 
@@ -2777,6 +2778,16 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
     // Return if the item should be filtered in/out
     return itemRank.passed;
 };
+/**
+ * DataTable will create a context to hold all values to
+ * help the render of the DataTable in serverside
+ *
+ *
+ * The query is required to be a GET request that can receive
+ * specified params and return a specified response
+ *
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
+ */
 function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }) {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
@@ -2836,6 +2847,17 @@ const DataTableServerContext = React.createContext({
     url: "",
 });
 
+/**
+ * DataTableServer will create a context to hold all values to
+ * help the render of the DataTable in serverside
+ *
+ * The query is required to be a GET request that can receive
+ * specified params and return a specified response
+ *
+ * The `useDataTableServer` can help to create the specified request and response
+ *
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
+ */
 function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }) {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
@@ -3423,7 +3445,7 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
                     // @ts-expect-error find type for unknown
                     const value = props.row.original[column];
                     if (typeof value === "object") {
-                        return jsxRuntime.jsx(TextCell, { children: JSON.stringify(value) });
+                        return (jsxRuntime.jsx(react.Grid, { overflow: "auto", children: jsxRuntime.jsx(RecordDisplay, { object: value }) }));
                     }
                     return jsxRuntime.jsx(TextCell, { children: value });
                 },
@@ -3583,7 +3605,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
     }
 };
 
-const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = false, }) => {
+const IdPicker = ({ column, isMultiple = false }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { schema, serverUrl, displayText } = useSchemaContext();
     const { fieldRequired } = displayText;
@@ -3593,7 +3615,9 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
         throw new Error("schema properties when using DatePicker");
     }
     const { total, showing, typeToSearch } = displayText;
-    const { gridColumn, gridRow, title, renderDisplay } = schema.properties[column];
+    const { gridColumn, gridRow, title, renderDisplay, foreign_key } = schema
+        .properties[column];
+    const { table: in_table, column: column_ref, display_column } = foreign_key;
     const [searchText, setSearchText] = React.useState();
     const [limit, setLimit] = React.useState(10);
     const [openSearchResult, setOpenSearchResult] = React.useState();
@@ -3602,7 +3626,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     const ref = React.useRef(null);
     const selectedIds = watch(column) ?? [];
     const query = reactQuery.useQuery({
-        queryKey: [`idpicker`, { searchText, in_table, limit, page }],
+        queryKey: [`idpicker`, { searchText, limit, page }],
         queryFn: async () => {
             const data = await getTableData({
                 serverUrl,
@@ -3729,21 +3753,25 @@ const DataListItem = React__namespace.forwardRef(function DataListItem(props, re
     return (jsxRuntime.jsxs(react.DataList.Item, { ref: ref, ...rest, children: [jsxRuntime.jsxs(react.DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsxRuntime.jsx(InfoTip, { children: info })] }), jsxRuntime.jsx(react.DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
 });
 
-const IdViewer = ({ value, in_table, column_ref, display_column, column, }) => {
+const IdViewer = ({ value, column }) => {
     const { schema, serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
         throw new Error("schema properties when using DatePicker");
     }
-    const { title } = schema.properties[column];
+    const { title, foreign_key } = schema.properties[column];
+    if (foreign_key === undefined) {
+        throw new Error('foreign_key when variant is id-picker');
+    }
+    const { table, column: foreginKeyColumn, display_column } = foreign_key;
     const query = reactQuery.useQuery({
-        queryKey: [`idpicker`, in_table, value],
+        queryKey: [`idpicker`, table, value],
         queryFn: async () => {
             return await getTableData({
                 serverUrl,
-                in_table: in_table,
+                in_table: foreginKeyColumn ?? '',
                 where: [
                     {
-                        id: column_ref,
+                        id: column,
                         value: value,
                     },
                 ],
@@ -4514,15 +4542,19 @@ const EnumPicker = ({ column, isMultiple = false }) => {
                                             }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Empty Search Result" }), " "] }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
-const idPickerSanityCheck = (column, in_table, column_ref, display_column) => {
-    if (!!in_table == false) {
-        throw new Error(`The key in_table does not exist in properties of column ${column}.`);
+const idPickerSanityCheck = (column, foreign_key) => {
+    if (!!foreign_key == false) {
+        throw new Error(`The key foreign_key does not exist in properties of column ${column} when using id-picker.`);
     }
-    if (!!column_ref == false) {
-        throw new Error(`The key column_ref does not exist in properties of column ${column}.`);
+    const { table, column: foreignKeyColumn, display_column } = foreign_key;
+    if (!!table == false) {
+        throw new Error(`The key table does not exist in properties of column ${table} when using id-picker.`);
     }
     if (!!display_column == false) {
-        throw new Error(`The key display_column does not exist in properties of column ${column}.`);
+        throw new Error(`The key display_column does not exist in properties of column ${column} when using id-picker.`);
+    }
+    if (!!foreignKeyColumn == false) {
+        throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
 const FormInternal = () => {
@@ -4628,14 +4660,11 @@ const FormInternal = () => {
                         if (shouldIgnore) {
                             return jsxRuntime.jsx(jsxRuntime.Fragment, {});
                         }
-                        const { type, variant, in_table, column_ref, display_column, gridColumn, gridRow, } = values;
+                        const { type, variant, gridColumn, gridRow, foreign_key } = values;
                         if (type === "string") {
                             if (variant === "id-picker") {
-                                idPickerSanityCheck(column, in_table, column_ref, display_column);
-                                return (jsxRuntime.jsx(IdViewer, { value: (validatedData ?? {})[column], in_table,
-                                    column_ref,
-                                    display_column,
-                                    column,
+                                idPickerSanityCheck(column, foreign_key);
+                                return (jsxRuntime.jsx(IdViewer, { value: (validatedData ?? {})[column], column,
                                     gridColumn,
                                     gridRow }, `form-${key}`));
                             }
@@ -4701,14 +4730,14 @@ const FormInternal = () => {
                                 return jsxRuntime.jsx(jsxRuntime.Fragment, {});
                             }
                             //@ts-expect-error TODO: add more fields to support form-creation
-                            const { type, variant, in_table, column_ref, display_column } = values;
+                            const { type, variant, in_table, column_ref, foreign_key } = values;
                             if (type === "string") {
                                 if ((values.enum ?? []).length > 0) {
                                     return jsxRuntime.jsx(EnumPicker, { column: key }, `form-${key}`);
                                 }
                                 if (variant === "id-picker") {
-                                    idPickerSanityCheck(column, in_table, column_ref, display_column);
-                                    return (jsxRuntime.jsx(IdPicker, { column: key, in_table: in_table, column_ref: column_ref, display_column: display_column }, `form-${key}`));
+                                    idPickerSanityCheck(column, foreign_key);
+                                    return jsxRuntime.jsx(IdPicker, { column: key }, `form-${key}`);
                                 }
                                 if (variant === "date-picker") {
                                     return jsxRuntime.jsx(DatePicker, { column: key }, `form-${key}`);
@@ -4726,8 +4755,8 @@ const FormInternal = () => {
                             }
                             if (type === "array") {
                                 if (variant === "id-picker") {
-                                    idPickerSanityCheck(column, in_table, column_ref, display_column);
-                                    return (jsxRuntime.jsx(IdPicker, { column: key, in_table: in_table, column_ref: column_ref, display_column: display_column, isMultiple: true }, `form-${key}`));
+                                    idPickerSanityCheck(column, foreign_key);
+                                    return jsxRuntime.jsx(IdPicker, { column: key, isMultiple: true }, `form-${key}`);
                                 }
                                 if (variant === "tag-picker") {
                                     return jsxRuntime.jsx(TagPicker, { column: key }, `form-${key}`);

package/dist/index.mjs

@@ -2585,11 +2585,12 @@ const snakeToLabel = (str) => {
 };
 
 const RecordDisplay = ({ object, boxProps }) => {
+    console.log(object, "dkfos");
     if (object === null) {
         return jsx(Fragment, { children: "null" });
     }
-    return (jsx(Grid, { rowGap: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), jsx(Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }, field));
+    return (jsx(Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
+            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), typeof value === "object" ? (jsx(RecordDisplay, { object: value })) : (jsx(Text, { children: JSON.stringify(value) }))] }, field));
         }) }));
 };
 
@@ -2757,6 +2758,16 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
     // Return if the item should be filtered in/out
     return itemRank.passed;
 };
+/**
+ * DataTable will create a context to hold all values to
+ * help the render of the DataTable in serverside
+ *
+ *
+ * The query is required to be a GET request that can receive
+ * specified params and return a specified response
+ *
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
+ */
 function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }) {
     const table = useReactTable({
         _features: [DensityFeature],
@@ -2816,6 +2827,17 @@ const DataTableServerContext = createContext({
     url: "",
 });
 
+/**
+ * DataTableServer will create a context to hold all values to
+ * help the render of the DataTable in serverside
+ *
+ * The query is required to be a GET request that can receive
+ * specified params and return a specified response
+ *
+ * The `useDataTableServer` can help to create the specified request and response
+ *
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
+ */
 function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }) {
     const table = useReactTable({
         _features: [DensityFeature],
@@ -3403,7 +3425,7 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
                     // @ts-expect-error find type for unknown
                     const value = props.row.original[column];
                     if (typeof value === "object") {
-                        return jsx(TextCell, { children: JSON.stringify(value) });
+                        return (jsx(Grid, { overflow: "auto", children: jsx(RecordDisplay, { object: value }) }));
                     }
                     return jsx(TextCell, { children: value });
                 },
@@ -3563,7 +3585,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
     }
 };
 
-const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = false, }) => {
+const IdPicker = ({ column, isMultiple = false }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { schema, serverUrl, displayText } = useSchemaContext();
     const { fieldRequired } = displayText;
@@ -3573,7 +3595,9 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
         throw new Error("schema properties when using DatePicker");
     }
     const { total, showing, typeToSearch } = displayText;
-    const { gridColumn, gridRow, title, renderDisplay } = schema.properties[column];
+    const { gridColumn, gridRow, title, renderDisplay, foreign_key } = schema
+        .properties[column];
+    const { table: in_table, column: column_ref, display_column } = foreign_key;
     const [searchText, setSearchText] = useState();
     const [limit, setLimit] = useState(10);
     const [openSearchResult, setOpenSearchResult] = useState();
@@ -3582,7 +3606,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     const ref = useRef(null);
     const selectedIds = watch(column) ?? [];
     const query = useQuery({
-        queryKey: [`idpicker`, { searchText, in_table, limit, page }],
+        queryKey: [`idpicker`, { searchText, limit, page }],
         queryFn: async () => {
             const data = await getTableData({
                 serverUrl,
@@ -3709,21 +3733,25 @@ const DataListItem = React.forwardRef(function DataListItem(props, ref) {
     return (jsxs(DataList.Item, { ref: ref, ...rest, children: [jsxs(DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsx(InfoTip, { children: info })] }), jsx(DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
 });
 
-const IdViewer = ({ value, in_table, column_ref, display_column, column, }) => {
+const IdViewer = ({ value, column }) => {
     const { schema, serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
         throw new Error("schema properties when using DatePicker");
     }
-    const { title } = schema.properties[column];
+    const { title, foreign_key } = schema.properties[column];
+    if (foreign_key === undefined) {
+        throw new Error('foreign_key when variant is id-picker');
+    }
+    const { table, column: foreginKeyColumn, display_column } = foreign_key;
     const query = useQuery({
-        queryKey: [`idpicker`, in_table, value],
+        queryKey: [`idpicker`, table, value],
         queryFn: async () => {
             return await getTableData({
                 serverUrl,
-                in_table: in_table,
+                in_table: foreginKeyColumn ?? '',
                 where: [
                     {
-                        id: column_ref,
+                        id: column,
                         value: value,
                     },
                 ],
@@ -4494,15 +4522,19 @@ const EnumPicker = ({ column, isMultiple = false }) => {
                                             }) }), isDirty && (jsxs(Fragment, { children: [dataList.length <= 0 && jsx(Fragment, { children: "Empty Search Result" }), " "] }))] })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
-const idPickerSanityCheck = (column, in_table, column_ref, display_column) => {
-    if (!!in_table == false) {
-        throw new Error(`The key in_table does not exist in properties of column ${column}.`);
+const idPickerSanityCheck = (column, foreign_key) => {
+    if (!!foreign_key == false) {
+        throw new Error(`The key foreign_key does not exist in properties of column ${column} when using id-picker.`);
     }
-    if (!!column_ref == false) {
-        throw new Error(`The key column_ref does not exist in properties of column ${column}.`);
+    const { table, column: foreignKeyColumn, display_column } = foreign_key;
+    if (!!table == false) {
+        throw new Error(`The key table does not exist in properties of column ${table} when using id-picker.`);
     }
     if (!!display_column == false) {
-        throw new Error(`The key display_column does not exist in properties of column ${column}.`);
+        throw new Error(`The key display_column does not exist in properties of column ${column} when using id-picker.`);
+    }
+    if (!!foreignKeyColumn == false) {
+        throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
 const FormInternal = () => {
@@ -4608,14 +4640,11 @@ const FormInternal = () => {
                         if (shouldIgnore) {
                             return jsx(Fragment, {});
                         }
-                        const { type, variant, in_table, column_ref, display_column, gridColumn, gridRow, } = values;
+                        const { type, variant, gridColumn, gridRow, foreign_key } = values;
                         if (type === "string") {
                             if (variant === "id-picker") {
-                                idPickerSanityCheck(column, in_table, column_ref, display_column);
-                                return (jsx(IdViewer, { value: (validatedData ?? {})[column], in_table,
-                                    column_ref,
-                                    display_column,
-                                    column,
+                                idPickerSanityCheck(column, foreign_key);
+                                return (jsx(IdViewer, { value: (validatedData ?? {})[column], column,
                                     gridColumn,
                                     gridRow }, `form-${key}`));
                             }
@@ -4681,14 +4710,14 @@ const FormInternal = () => {
                                 return jsx(Fragment, {});
                             }
                             //@ts-expect-error TODO: add more fields to support form-creation
-                            const { type, variant, in_table, column_ref, display_column } = values;
+                            const { type, variant, in_table, column_ref, foreign_key } = values;
                             if (type === "string") {
                                 if ((values.enum ?? []).length > 0) {
                                     return jsx(EnumPicker, { column: key }, `form-${key}`);
                                 }
                                 if (variant === "id-picker") {
-                                    idPickerSanityCheck(column, in_table, column_ref, display_column);
-                                    return (jsx(IdPicker, { column: key, in_table: in_table, column_ref: column_ref, display_column: display_column }, `form-${key}`));
+                                    idPickerSanityCheck(column, foreign_key);
+                                    return jsx(IdPicker, { column: key }, `form-${key}`);
                                 }
                                 if (variant === "date-picker") {
                                     return jsx(DatePicker, { column: key }, `form-${key}`);
@@ -4706,8 +4735,8 @@ const FormInternal = () => {
                             }
                             if (type === "array") {
                                 if (variant === "id-picker") {
-                                    idPickerSanityCheck(column, in_table, column_ref, display_column);
-                                    return (jsx(IdPicker, { column: key, in_table: in_table, column_ref: column_ref, display_column: display_column, isMultiple: true }, `form-${key}`));
+                                    idPickerSanityCheck(column, foreign_key);
+                                    return jsx(IdPicker, { column: key, isMultiple: true }, `form-${key}`);
                                 }
                                 if (variant === "tag-picker") {
                                     return jsx(TagPicker, { column: key }, `form-${key}`);

package/dist/types/components/DataTable/DataTable.d.ts

@@ -12,7 +12,20 @@ declare module "@tanstack/react-table" {
 }
 export interface DataTableProps<TData = unknown> {
     children?: ReactNode | ReactNode[];
+    /**
+     * Data array for the table.
+     *
+     * It will pass into as the data in `@tanstack/react-table`
+     *
+     */
     data: TData[];
+    /**
+     * Column definitions for the table.
+     *
+     * It will pass into as the column definitions in `@tanstack/react-table`
+     *
+     * @link https://tanstack.com/table/latest/docs/guide/column-defs
+     */
     columns: ColumnDef<TData, unknown>[];
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
@@ -35,4 +48,14 @@ export interface DataTableProps<TData = unknown> {
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
 }
+/**
+ * DataTable will create a context to hold all values to
+ * help the render of the DataTable in serverside
+ *
+ *
+ * The query is required to be a GET request that can receive
+ * specified params and return a specified response
+ *
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
+ */
 export declare function DataTable<TData = unknown>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/DataTableServer.d.ts

@@ -5,6 +5,13 @@ import { DensityState } from "../Controls/DensityFeature";
 import { DataResponse } from "./useDataTableServer";
 export interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
     children: ReactNode | ReactNode[];
+    /**
+     * Column definitions for the table.
+     *
+     * It will pass into as the column definitions in `@tanstack/react-table`
+     *
+     * @link https://tanstack.com/table/latest/docs/guide/column-defs
+     */
     columns: ColumnDef<TData>[];
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
@@ -28,4 +35,15 @@ export interface DataTableServerProps<TData extends DataResponse = DataResponse<
     query: UseQueryResult<TData>;
     url: string;
 }
+/**
+ * DataTableServer will create a context to hold all values to
+ * help the render of the DataTable in serverside
+ *
+ * The query is required to be a GET request that can receive
+ * specified params and return a specified response
+ *
+ * The `useDataTableServer` can help to create the specified request and response
+ *
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
+ */
 export declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }: DataTableServerProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/IdPicker.d.ts

@@ -1,8 +1,5 @@
 export interface IdPickerProps {
     column: string;
-    in_table: string;
-    column_ref: string;
-    display_column: string;
     isMultiple?: boolean;
 }
-export declare const IdPicker: ({ column, in_table, column_ref, display_column, isMultiple, }: IdPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IdPicker: ({ column, isMultiple }: IdPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/IdViewer.d.ts

@@ -1,8 +1,5 @@
 export interface IdViewerProps {
     value: string | undefined;
-    in_table: string;
-    column_ref: string;
-    display_column: string;
     column: string;
 }
-export declare const IdViewer: ({ value, in_table, column_ref, display_column, column, }: IdViewerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IdViewer: ({ value, column }: IdViewerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/StringInputField.d.ts

@@ -8,5 +8,10 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
     title?: string;
     in_table?: string;
     object_id_column?: string;
+    foreign_key?: {
+        column?: string;
+        table?: string;
+        display_column: string;
+    };
 }
 export declare const StringInputField: ({ column }: StringInputFieldProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "7.6.3",
+  "version": "8.0.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",