@skalfa/skalfa-component 1.0.33 → 1.0.34

package/dist/supervision/TableSupervision.component.d.ts

@@ -63,6 +63,7 @@ export type TableSupervisionProps = {
     noIndex?: boolean;
     actionBulkingControl?: TableProps["actionBulking"];
     controlBar?: (ControlBarOptionType | "CREATE" | "IMPORT" | "EXPORT" | "PRINT")[];
+    filterBar?: ReactNode;
     responsiveControl?: {
         mobile?: boolean | {
             item?: (item: Record<string, any>, key: number) => ReactNode;
@@ -75,4 +76,4 @@ export type TableSupervisionProps = {
         };
     };
 };
-export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, }: TableSupervisionProps): import("@types/react").JSX.Element;
+export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, filterBar, noIndex, responsiveControl, urlParam, }: TableSupervisionProps): import("@types/react").JSX.Element;

package/dist/supervision/TableSupervision.component.js

@@ -12,7 +12,7 @@ const ExportExcel = _utils_1.registry.get("ExportExcel");
 const ImportExcel = _utils_1.registry.get("ImportExcel");
 ;
 ;
-function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, }) {
+function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, filterBar, noIndex, responsiveControl, urlParam, }) {
     const l = (0, skalfa_lang_1.useLang)();
     const { tableKey, tableControl, data, selected, setSelected, checks, setChecks, reset, focus, setFocus } = (0, _utils_1.useTable)(fetchControl, id, title, (urlParam || true));
     const { setToggle, toggle } = (0, _contexts_1.useToggleContext)();
@@ -243,7 +243,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
                     ...(columns?.filter((c) => !!c.filterable)?.length ? ["FILTER"] : []),
                     ...(columns?.filter((c) => !!c.sortable)?.length ? ["SORT"] : []),
                     "SELECTABLE", "REFRESH",
-                ], columns: columns, data: dataTables, onRowClick: onRowClick ? onRowClick : detailControl != false ? (e) => {
+                ], filterBar: filterBar, columns: columns, data: dataTables, onRowClick: onRowClick ? onRowClick : detailControl != false ? (e) => {
                     setToggle(`MODAL_SHOW_${toggleKey}`);
                     setSelected(e);
                 } : undefined, actionBulking: actionBulkingControl, checks: checks || [], onChangeChecks: (e) => setChecks(e), block: block, focus: focus, noIndex: noIndex, responsiveControl: responsiveControl ? {

package/dist/table/Table.component.d.ts

@@ -26,6 +26,7 @@ export interface TableColumnType {
 export interface TableProps {
     id?: string;
     controlBar?: false | ControlBarOptionType[];
+    filterBar?: ReactNode;
     columns: TableColumnType[];
     data: Record<string, any>[];
     pagination?: PaginationProps | false;
@@ -61,4 +62,4 @@ export interface TableProps {
     /** Use custom class with: "controller-bar::", "head-column::", "column::", "floating-action::", "row::". */
     className?: string;
 }
-export declare function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className, }: TableProps): import("@types/react").JSX.Element;
+export declare function TableComponent({ id, controlBar, filterBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className, }: TableProps): import("@types/react").JSX.Element;

package/dist/table/Table.component.js

@@ -12,7 +12,7 @@ const ScrollContainer_component_1 = require("../wrap/ScrollContainer.component")
 const Checkbox_component_1 = require("../input/Checkbox.component");
 const Swipe_component_1 = require("../wrap/Swipe.component");
 const skalfa_lang_1 = require("@skalfa/skalfa-lang");
-function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className = "", }) {
+function TableComponent({ id, controlBar, filterBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className = "", }) {
     const l = (0, skalfa_lang_1.useLang)();
     const [displayColumns, setDisplayColumns] = (0, react_1.useState)([]);
     const [showFloatingAction, setShowFloatingAction] = (0, react_1.useState)(false);
@@ -97,7 +97,7 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
                     selector: c.selector,
                     type: typeof c?.filterable == "object" ? c?.filterable?.type : "text",
                     options: typeof c?.filterable == "object" && c?.filterable?.type == "select" ? c?.filterable?.options : undefined
-                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: `w-full ${block ? "pb-12" : ""}`, onScroll: (e) => {
+                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), filterBar, (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: `w-full ${block ? "pb-12" : ""}`, onScroll: (e) => {
                         actionColumnRef.current?.clientWidth && e.scrollLeft &&
                             setShowFloatingAction(e.scrollLeft + e.clientWidth <= e.scrollWidth - actionColumnRef.current?.clientWidth);
                     }, footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: block && pagination && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "py-6" }), (0, jsx_runtime_1.jsx)("div", { className: "my-2 absolute bottom-0 w-full", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })] })) }), children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "w-max min-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "table-loading-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-loading-text", children: l.base.tableLoading ? l.base.tableLoading() : "" }) }) })) : !data || !data.length ? ((0, jsx_runtime_1.jsx)("div", { className: "table-empty-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-empty-text", children: l.base.tableEmpty ? l.base.tableEmpty() : "Data empty" }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isSm || !responsiveControl?.mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-max min-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-row", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: "table-head-column w-max", children: (0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: data.length > 0 && checks?.length === data.length, onChange: () => data.length > 0 && checks?.length === data.length ? onChangeChecks?.([]) : onChangeChecks?.(data.map((d) => d.id)) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-head-column w-8", (0, _utils_1.pcn)(className, "head-column")), children: "#" }), renderHead()] }), (0, jsx_runtime_1.jsx)("div", { className: "table-body", children: data.map((item, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/supervision/TableSupervision.component.tsx

@@ -75,6 +75,7 @@ export type TableSupervisionProps = {
   noIndex              ?: boolean;
   actionBulkingControl ?:  TableProps["actionBulking"],
   controlBar           ?:  (ControlBarOptionType | "CREATE" | "IMPORT" | "EXPORT" | "PRINT")[];
+  filterBar            ?: ReactNode;
   responsiveControl    ?:  {
     mobile                 ?:  boolean | {
       item                 ?:  (item: Record<string, any>, key: number) => ReactNode,
@@ -98,6 +99,7 @@ export function TableSupervisionComponent({
   actionBulkingControl,
   block,
   controlBar,
+  filterBar,
   noIndex,
   responsiveControl,
   urlParam,
@@ -500,6 +502,7 @@ export function TableSupervisionComponent({
           ...(columns?.filter((c) => !!(c as { sortable?: any }).sortable)?.length ? ["SORT"] : []),
           "SELECTABLE", "REFRESH",
         ]}
+        filterBar={filterBar}
         columns={columns as TableColumnType[]}
         data={dataTables}
         onRowClick={onRowClick ? onRowClick : detailControl != false ? (e) => {

package/src/table/Table.component.tsx

@@ -36,6 +36,8 @@ export interface TableProps {
   id                        ?: string;
   
   controlBar                ?:  false | ControlBarOptionType[];
+  filterBar                 ?: ReactNode;
+
 
   columns                    :  TableColumnType[];
   data                       :  Record<string, any>[];
@@ -76,6 +78,7 @@ export interface TableProps {
 export function TableComponent({
   id,
   controlBar,
+  filterBar,
   columns,
   data,
   pagination,
@@ -290,6 +293,8 @@ export function TableComponent({
         />
       )}
 
+      {filterBar}
+
       <div className="relative">
         <ScrollContainerComponent
           scrollFloating={!isSm && block}