@bsol-oss/react-datatable5 6.0.0 → 6.0.2

package/dist/index.d.ts

@@ -392,6 +392,18 @@ declare const FilterOptions: ({ column }: FilterOptionsProps) => react_jsx_runti
 
 declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
 
+interface GetColumnsConfigs<K extends RowData> {
+    schema: JSONSchema7;
+    ignore?: K[];
+    width?: number[];
+    meta?: {
+        [key in K as string]?: object;
+    };
+    defaultWidth?: number;
+}
+declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
+declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
+
 interface DisplayTextProps {
     title?: string;
     addNew?: string;
@@ -520,4 +532,4 @@ declare module "@tanstack/react-table" {
     }
 }
 
-export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type DisplayTextProps, EditFilterButton, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, EditViewButton, type EditViewButtonProps, FilterOptions, type FilterOptionsProps, Form, type FormProps, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type RangeCalendarProps, type RangeDatePickerProps, type RefreshDataConfig, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataFromUrlProps, type UseDataFromUrlReturn, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, getMultiDates, getRangeDates, useDataFromUrl, useDataTable, useDataTableContext, useDataTableServer };
+export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type DisplayTextProps, EditFilterButton, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, EditViewButton, type EditViewButtonProps, FilterOptions, type FilterOptionsProps, Form, type FormProps, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type RangeCalendarProps, type RangeDatePickerProps, type RefreshDataConfig, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataFromUrlProps, type UseDataFromUrlReturn, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, getColumns, getMultiDates, getRangeDates, useDataFromUrl, useDataTable, useDataTableContext, useDataTableServer, widthSanityCheck };

package/dist/index.js

@@ -1365,6 +1365,60 @@ const GlobalFilter = () => {
                 } }) }) }));
 };
 
+const idListSanityCheck = (param, idList, properties) => {
+    const allKeyExists = idList.every((key) => Object.keys(properties).some((column) => column == key));
+    if (!allKeyExists) {
+        const wrongKey = idList.find((key) => !Object.keys(properties).some((column) => column == key));
+        throw new Error(`The key ${wrongKey} in ${param} does not exist in schema.`);
+    }
+};
+
+const widthSanityCheck = (widthList, ignoreList, properties) => {
+    const widthListToolong = widthList.length > Object.keys(properties).length;
+    if (widthListToolong) {
+        throw new Error(`The width list is too long given from the number of properties.`);
+    }
+    const widthListToolongWithIgnore = widthList.length > Object.keys(properties).length - ignoreList.length;
+    if (widthListToolongWithIgnore) {
+        throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
+    }
+};
+const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
+    const { properties } = schema;
+    idListSanityCheck("ignore", ignore, properties);
+    widthSanityCheck(width, ignore, properties);
+    idListSanityCheck("meta", Object.keys(meta), properties);
+    const keys = Object.keys(properties);
+    const ignored = keys.filter((key) => {
+        return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
+    });
+    const columnHelper = reactTable.createColumnHelper();
+    // @ts-expect-error find type for unknown
+    const columns = [
+        ...ignored.map((column, index) => {
+            return columnHelper.accessor(column, {
+                cell: (props) => {
+                    // @ts-expect-error find type for unknown
+                    return jsxRuntime.jsx(TextCell, { children: props.row.original[column] });
+                },
+                header: (columnHeader) => {
+                    const displayName = columnHeader.column.columnDef.meta?.displayName ??
+                        snakeToLabel(column);
+                    return jsxRuntime.jsx("span", { children: displayName });
+                },
+                footer: (columnFooter) => {
+                    const displayName = columnFooter.column.columnDef.meta?.displayName ??
+                        snakeToLabel(column);
+                    return jsxRuntime.jsx("span", { children: displayName });
+                },
+                size: width[index] ?? defaultWidth,
+                meta: Object.keys(meta).length > 0 ? meta[column] : {},
+            });
+        }),
+    ];
+    return columns;
+};
+
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = React.createContext({
     schema: {},
@@ -1637,14 +1691,6 @@ const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
 
-const idListSanityCheck = (param, idList, properties) => {
-    const allKeyExists = idList.every((key) => Object.keys(properties).some((column) => column == key));
-    if (!allKeyExists) {
-        const wrongKey = idList.find((key) => !Object.keys(properties).some((column) => column == key));
-        throw new Error(`The key ${wrongKey} in ${param} does not exist in schema.`);
-    }
-};
-
 const AccordionItemTrigger = React__namespace.forwardRef(function AccordionItemTrigger(props, ref) {
     const { children, indicatorPlacement = "end", ...rest } = props;
     return (jsxRuntime.jsxs(react.Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === "start" && (jsxRuntime.jsx(react.Accordion.ItemIndicator, { rotate: { base: "-90deg", _open: "0deg" }, children: jsxRuntime.jsx(lu.LuChevronDown, {}) })), jsxRuntime.jsx(react.HStack, { gap: "4", flex: "1", textAlign: "start", width: "full", children: children }), indicatorPlacement === "end" && (jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: jsxRuntime.jsx(lu.LuChevronDown, {}) }))] }));
@@ -2251,9 +2297,11 @@ exports.TableSelector = TableSelector;
 exports.TableSorter = TableSorter;
 exports.TableViewer = TableViewer;
 exports.TextCell = TextCell;
+exports.getColumns = getColumns;
 exports.getMultiDates = getMultiDates;
 exports.getRangeDates = getRangeDates;
 exports.useDataFromUrl = useDataFromUrl;
 exports.useDataTable = useDataTable;
 exports.useDataTableContext = useDataTableContext;
 exports.useDataTableServer = useDataTableServer;
+exports.widthSanityCheck = widthSanityCheck;

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { FaUpDown, FaGripLinesVertical } from 'react-icons/fa6';
 import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
 import { CgClose } from 'react-icons/cg';
 import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
-import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
+import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender, createColumnHelper } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { BsExclamationCircleFill } from 'react-icons/bs';
 import { GrAscend, GrDescend } from 'react-icons/gr';
@@ -1345,6 +1345,60 @@ const GlobalFilter = () => {
                 } }) }) }));
 };
 
+const idListSanityCheck = (param, idList, properties) => {
+    const allKeyExists = idList.every((key) => Object.keys(properties).some((column) => column == key));
+    if (!allKeyExists) {
+        const wrongKey = idList.find((key) => !Object.keys(properties).some((column) => column == key));
+        throw new Error(`The key ${wrongKey} in ${param} does not exist in schema.`);
+    }
+};
+
+const widthSanityCheck = (widthList, ignoreList, properties) => {
+    const widthListToolong = widthList.length > Object.keys(properties).length;
+    if (widthListToolong) {
+        throw new Error(`The width list is too long given from the number of properties.`);
+    }
+    const widthListToolongWithIgnore = widthList.length > Object.keys(properties).length - ignoreList.length;
+    if (widthListToolongWithIgnore) {
+        throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
+    }
+};
+const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
+    const { properties } = schema;
+    idListSanityCheck("ignore", ignore, properties);
+    widthSanityCheck(width, ignore, properties);
+    idListSanityCheck("meta", Object.keys(meta), properties);
+    const keys = Object.keys(properties);
+    const ignored = keys.filter((key) => {
+        return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
+    });
+    const columnHelper = createColumnHelper();
+    // @ts-expect-error find type for unknown
+    const columns = [
+        ...ignored.map((column, index) => {
+            return columnHelper.accessor(column, {
+                cell: (props) => {
+                    // @ts-expect-error find type for unknown
+                    return jsx(TextCell, { children: props.row.original[column] });
+                },
+                header: (columnHeader) => {
+                    const displayName = columnHeader.column.columnDef.meta?.displayName ??
+                        snakeToLabel(column);
+                    return jsx("span", { children: displayName });
+                },
+                footer: (columnFooter) => {
+                    const displayName = columnFooter.column.columnDef.meta?.displayName ??
+                        snakeToLabel(column);
+                    return jsx("span", { children: displayName });
+                },
+                size: width[index] ?? defaultWidth,
+                meta: Object.keys(meta).length > 0 ? meta[column] : {},
+            });
+        }),
+    ];
+    return columns;
+};
+
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = createContext({
     schema: {},
@@ -1617,14 +1671,6 @@ const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
 
-const idListSanityCheck = (param, idList, properties) => {
-    const allKeyExists = idList.every((key) => Object.keys(properties).some((column) => column == key));
-    if (!allKeyExists) {
-        const wrongKey = idList.find((key) => !Object.keys(properties).some((column) => column == key));
-        throw new Error(`The key ${wrongKey} in ${param} does not exist in schema.`);
-    }
-};
-
 const AccordionItemTrigger = React.forwardRef(function AccordionItemTrigger(props, ref) {
     const { children, indicatorPlacement = "end", ...rest } = props;
     return (jsxs(Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === "start" && (jsx(Accordion.ItemIndicator, { rotate: { base: "-90deg", _open: "0deg" }, children: jsx(LuChevronDown, {}) })), jsx(HStack, { gap: "4", flex: "1", textAlign: "start", width: "full", children: children }), indicatorPlacement === "end" && (jsx(Accordion.ItemIndicator, { children: jsx(LuChevronDown, {}) }))] }));
@@ -2194,4 +2240,4 @@ class RangeDatePicker extends React__default.Component {
     }
 }
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, FilterOptions, Form, GlobalFilter, PageSizeControl, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, getMultiDates, getRangeDates, useDataFromUrl, useDataTable, useDataTableContext, useDataTableServer };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, FilterOptions, Form, GlobalFilter, PageSizeControl, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, getColumns, getMultiDates, getRangeDates, useDataFromUrl, useDataTable, useDataTableContext, useDataTableServer, widthSanityCheck };

package/dist/types/index.d.ts

@@ -90,6 +90,7 @@ export * from "./components/DataTable/useDataTableContext";
 export * from "./components/DataTable/useDataTableServer";
 export * from "./components/Filter/FilterOptions";
 export * from "./components/Filter/GlobalFilter";
+export * from "./components/DataTable/utils/getColumns";
 export * from "./components/Form/Form";
 export * from "./components/DatePicker/DatePicker";
 export * from "./components/DatePicker/getMultiDates";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -47,7 +47,8 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.4.0",
-    "tiny-invariant": "^1.3.3"
+    "tiny-invariant": "^1.3.3",
+    "axios": "^1.7.9"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.3",
@@ -66,7 +67,6 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "axios": "^1.7.9",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",