@charlesgomes/leafcode-shared-lib-react 1.0.30 → 1.0.32

package/dist/index.css

@@ -108,7 +108,7 @@ th {
   border-top: 1px solid #edf0f2;
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 0 14px;
+  padding: 0 0 0 7px;
   font-size: 14px;
   font-family: "Roboto", sans-serif;
   font-weight: bold;
@@ -117,7 +117,7 @@ th {
 td {
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 5px 1rem;
+  padding: 1.5px 7px;
 }
 .p-datatable .p-datatable-header {
   background: transparent;
@@ -134,9 +134,6 @@ td {
   -moz-appearance: none;
   background: #fff url("./seta-E7LTVAWJ.svg") no-repeat right 6px center;
 }
-.react-tooltip {
-  z-index: 99 !important;
-}
 .p-paginator-left-content {
   flex: 1;
 }
@@ -178,6 +175,30 @@ th {
   background: #094394;
   color: #ffffff;
 }
+.p-datatable .p-datatable-tbody > tr > td.p-selection-column {
+  text-align: center !important;
+  display: table-cell;
+  vertical-align: middle;
+  position: relative;
+}
+.p-datatable .p-datatable-tbody > tr > td.p-selection-column .p-checkbox {
+  position: relative;
+  left: -2px;
+}
+.p-datatable .p-datatable-thead > tr > th.p-selection-column .p-checkbox-input {
+  text-align: center !important;
+  position: relative;
+  left: -1rem;
+}
+.p-selection-column .p-checkbox {
+  display: inline-flex;
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+}
+.p-column-header-content .p-checkbox {
+  position: static;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #fafbfc;
 }
@@ -295,6 +316,7 @@ th {
 }
 .p-column-title {
   flex: 1;
+  text-align: left;
 }
 .p-column-filter-add-button {
   font-family: "Roboto", sans-serif;
@@ -400,14 +422,9 @@ th {
   opacity: 1;
 }
 .box-icones-actions-column {
-  position: fixed;
-  z-index: 2;
-  padding: 0.125rem;
   width: fit-content;
   height: fit-content;
   margin: auto;
-  right: 6px;
-  transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -415,6 +432,19 @@ th {
   gap: 0.25rem;
   transition: opacity 0.2s ease;
 }
+.p-datatable .p-datatable-tbody > tr > td:last-child {
+  position: sticky !important;
+  right: 0;
+  z-index: 11;
+  border-left: transparent;
+  border-right: transparent;
+}
+.p-datatable .p-datatable-tbody > tr > td:nth-last-child(2) {
+  border-right: 1px solid #edf0f2 !important;
+}
+.react-tooltip {
+  z-index: 99 !important;
+}
 .box-icones-actions-column:hover {
   opacity: 1;
 }
@@ -469,3 +499,8 @@ th {
     min-width: 100%;
   }
 }
+.p-datatable .p-datatable-thead > tr > th:last-child .p-column-title {
+  flex: 1;
+  text-align: center;
+  padding: 0 17px 0 7px;
+}

package/dist/index.d.mts

@@ -69,6 +69,7 @@ interface ColumnCustom<T> {
   dataType?: "boolean" | "string" | "date" | "dateTime" | "numeric";
   filterGlobal?: boolean;
   filterElement?: ReactNode;
+  showFilterMatchModes?: boolean;
   filterMatchModeOptions?: {
     label: string;
     value: FilterMatchModeType | string;
@@ -96,7 +97,14 @@ declare const DateFilterTemplate: (options: any, mask?: (value: any) => string |
 declare const DateTimeFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const ValueFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const SelectFilterTemplate: (options: any, isLanguagePtBr?: boolean, items?: IItemProps[]) => react_jsx_runtime.JSX.Element;
+declare const CustomFilterElement: (options: any, isLanguagePtBr?: boolean, items?: any[]) => react_jsx_runtime.JSX.Element;
 
+declare const customMatchModes: {
+    notStartsWith: string;
+    notEndsWith: string;
+    empty: string;
+    notEmpty: string;
+};
 declare const getDefaultFilterMatchOptionsString: (isLanguagePtBr?: boolean) => {
     label: string;
     value: string;
@@ -118,4 +126,4 @@ declare const getDefaultFilterMatchOptionsEnumNotNullable: (isLanguagePtBr: bool
     value: FilterMatchMode;
 }[];
 
-export { Button, type ColumnCustom, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, ModalBase, SelectFilterTemplate, ValueFilterTemplate, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsEnumNotNullable, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray };
+export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, ModalBase, SelectFilterTemplate, ValueFilterTemplate, customMatchModes, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsEnumNotNullable, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray };

package/dist/index.d.ts

@@ -69,6 +69,7 @@ interface ColumnCustom<T> {
   dataType?: "boolean" | "string" | "date" | "dateTime" | "numeric";
   filterGlobal?: boolean;
   filterElement?: ReactNode;
+  showFilterMatchModes?: boolean;
   filterMatchModeOptions?: {
     label: string;
     value: FilterMatchModeType | string;
@@ -96,7 +97,14 @@ declare const DateFilterTemplate: (options: any, mask?: (value: any) => string |
 declare const DateTimeFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const ValueFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const SelectFilterTemplate: (options: any, isLanguagePtBr?: boolean, items?: IItemProps[]) => react_jsx_runtime.JSX.Element;
+declare const CustomFilterElement: (options: any, isLanguagePtBr?: boolean, items?: any[]) => react_jsx_runtime.JSX.Element;
 
+declare const customMatchModes: {
+    notStartsWith: string;
+    notEndsWith: string;
+    empty: string;
+    notEmpty: string;
+};
 declare const getDefaultFilterMatchOptionsString: (isLanguagePtBr?: boolean) => {
     label: string;
     value: string;
@@ -118,4 +126,4 @@ declare const getDefaultFilterMatchOptionsEnumNotNullable: (isLanguagePtBr: bool
     value: FilterMatchMode;
 }[];
 
-export { Button, type ColumnCustom, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, ModalBase, SelectFilterTemplate, ValueFilterTemplate, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsEnumNotNullable, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray };
+export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, ModalBase, SelectFilterTemplate, ValueFilterTemplate, customMatchModes, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsEnumNotNullable, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray };

package/dist/index.js

@@ -31,14 +31,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  CustomFilterElement: () => CustomFilterElement,
   DataTableAdvancedFilter: () => DataTableAdvancedFilter,
   DateFilterTemplate: () => DateFilterTemplate,
   DateTimeFilterTemplate: () => DateTimeFilterTemplate,
-  FilterMatchMode: () => import_api4.FilterMatchMode,
-  FilterOperator: () => import_api4.FilterOperator,
+  FilterMatchMode: () => import_api5.FilterMatchMode,
+  FilterOperator: () => import_api5.FilterOperator,
   ModalBase: () => ModalBase,
   SelectFilterTemplate: () => SelectFilterTemplate,
   ValueFilterTemplate: () => ValueFilterTemplate,
+  customMatchModes: () => customMatchModes,
   getDefaultFilterMatchOptionsDate: () => getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum: () => getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable: () => getDefaultFilterMatchOptionsEnumNotNullable,
@@ -239,6 +241,7 @@ function TooltipCustom({ label, id }) {
       className: "tooltip-icone",
       opacity: 1,
       place: "top",
+      content: label,
       anchorSelect: `#${id}`,
       style: {
         zIndex: 9999
@@ -464,6 +467,7 @@ function DynamicColumns({
           filter: !isActionsCol,
           frozen: col.frozen,
           alignFrozen: col.alignFrozen,
+          showFilterMatchModes: col.showFilterMatchModes,
           dataType: col.dataType,
           hidden: col.hidden,
           filterElement: col.filterElement ? (options) => col.filterElement?.(options, col.mask) ?? void 0 : void 0,
@@ -493,6 +497,7 @@ function DynamicColumns({
 }
 
 // src/utils/DataTableUtils.tsx
+var import_api2 = require("primereact/api");
 var getUrlParams = (sortFieldInitial, sortOrderInitial) => {
   const params = new URLSearchParams(
     typeof window !== "undefined" ? window.location.search : ""
@@ -766,11 +771,8 @@ function DataTableAdvancedFilterWrapper({
                 ...filters[key]?.filterFieldCollection && {
                   filterFieldCollection: filters[key].filterFieldCollection
                 },
-                ...filters[key]?.campoId && {
-                  campoId: filters[key].campoId
-                },
-                ...filters[key]?.operator && {
-                  operator: filters[key].operator
+                ...filters[key]?.fieldId && {
+                  fieldId: filters[key].fieldId
                 }
               };
             }
@@ -797,7 +799,7 @@ function DataTableAdvancedFilterWrapper({
 }
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
-var import_api2 = require("primereact/api");
+var import_api3 = require("primereact/api");
 
 // src/utils/locale.ts
 var localePtBr = {
@@ -973,16 +975,16 @@ function DataTableAdvancedFilter({
 }) {
   const [isClient, setIsClient] = (0, import_react8.useState)(false);
   (0, import_react8.useEffect)(() => {
-    (0, import_api2.addLocale)("pt", localePtBr);
+    (0, import_api3.addLocale)("pt", localePtBr);
   }, []);
   (0, import_react8.useEffect)(() => {
-    (0, import_api2.locale)(isLanguagePtBr ? "pt" : "en");
+    (0, import_api3.locale)(isLanguagePtBr ? "pt" : "en");
   }, [isLanguagePtBr]);
   (0, import_react8.useEffect)(() => {
     setIsClient(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_api2.PrimeReactProvider,
+    import_api3.PrimeReactProvider,
     {
       value: isLanguagePtBr ? { locale: "pt" } : { locale: "en" },
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1011,6 +1013,7 @@ function DataTableAdvancedFilter({
 
 // src/components/DataTableAdvancedFilter/FilterTemplates.tsx
 var import_react_select = __toESM(require("react-select"));
+var import_dropdown = require("primereact/dropdown");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DateFilterTemplate = (options, mask) => {
   const parsedValue = options.value && typeof options.value === "string" ? /* @__PURE__ */ new Date(options.value + "T00:00:00") : options.value;
@@ -1141,9 +1144,79 @@ var SelectFilterTemplate = (options, isLanguagePtBr = true, items = []) => {
     }
   );
 };
+var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
+  const resolvedItems = items ?? getDefaultFilterMatchOptionsString(isLanguagePtBr);
+  const currentFilter = options.value ?? {};
+  const currentValue = currentFilter.value ?? null;
+  const currentMatchMode = currentFilter.matchMode ?? "contains";
+  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: "filter-wrapper",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        minWidth: "200px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_dropdown.Dropdown,
+          {
+            value: currentMatchMode,
+            options: resolvedItems,
+            optionLabel: "label",
+            optionValue: "value",
+            placeholder: "Tipo de filtro",
+            style: { width: "100%" },
+            onChange: (e) => {
+              const newMatchMode = e.value;
+              const isNewSpecial = newMatchMode === customMatchModes.empty || newMatchMode === customMatchModes.notEmpty;
+              if (isNewSpecial) {
+                options.filterCallback({
+                  value: null,
+                  matchMode: newMatchMode
+                });
+                return;
+              }
+              options.filterCallback({
+                value: null,
+                matchMode: newMatchMode
+              });
+            }
+          }
+        ),
+        !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_inputtext.InputText,
+          {
+            value: currentValue ?? "",
+            placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
+            style: { width: "100%" },
+            className: "p-column-filter",
+            onChange: (e) => {
+              const value = e.target.value;
+              if (value.trim()) {
+                options.filterCallback({
+                  value,
+                  matchMode: currentMatchMode
+                });
+              } else {
+                options.filterCallback({
+                  value: null,
+                  matchMode: currentMatchMode
+                });
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 
 // src/components/DataTableAdvancedFilter/filterModes.ts
-var import_api3 = require("primereact/api");
+var import_api4 = require("primereact/api");
 var customMatchModes = {
   notStartsWith: "notStartsWith",
   notEndsWith: "notEndsWith",
@@ -1153,23 +1226,23 @@ var customMatchModes = {
 var getDefaultFilterMatchOptionsString = (isLanguagePtBr = true) => [
   {
     label: isLanguagePtBr ? "Cont\xE9m" : "Contains",
-    value: import_api3.FilterMatchMode.CONTAINS
+    value: import_api4.FilterMatchMode.CONTAINS
   },
   {
     label: isLanguagePtBr ? "N\xE3o cont\xE9m" : "Does not contain",
-    value: import_api3.FilterMatchMode.NOT_CONTAINS
+    value: import_api4.FilterMatchMode.NOT_CONTAINS
   },
   {
     label: isLanguagePtBr ? "Igual" : "Equals",
-    value: import_api3.FilterMatchMode.EQUALS
+    value: import_api4.FilterMatchMode.EQUALS
   },
   {
     label: isLanguagePtBr ? "Diferente" : "Not equals",
-    value: import_api3.FilterMatchMode.NOT_EQUALS
+    value: import_api4.FilterMatchMode.NOT_EQUALS
   },
   {
     label: isLanguagePtBr ? "Come\xE7a com" : "Starts with",
-    value: import_api3.FilterMatchMode.STARTS_WITH
+    value: import_api4.FilterMatchMode.STARTS_WITH
   },
   {
     label: isLanguagePtBr ? "N\xE3o come\xE7a com" : "Does not start with",
@@ -1177,7 +1250,7 @@ var getDefaultFilterMatchOptionsString = (isLanguagePtBr = true) => [
   },
   {
     label: isLanguagePtBr ? "Termina com" : "Ends with",
-    value: import_api3.FilterMatchMode.ENDS_WITH
+    value: import_api4.FilterMatchMode.ENDS_WITH
   },
   {
     label: isLanguagePtBr ? "N\xE3o termina com" : "Does not end with",
@@ -1186,36 +1259,40 @@ var getDefaultFilterMatchOptionsString = (isLanguagePtBr = true) => [
   {
     label: isLanguagePtBr ? "Vazio" : "Empty",
     value: customMatchModes.empty
+  },
+  {
+    label: isLanguagePtBr ? "N\xE3o Vazio" : "NotEmpty",
+    value: customMatchModes.notEmpty
   }
 ];
 var getDefaultFilterMatchOptionsStringArray = (isLanguagePtBr = true) => [
   {
     label: isLanguagePtBr ? "Cont\xE9m" : "Contains",
-    value: import_api3.FilterMatchMode.CONTAINS
+    value: import_api4.FilterMatchMode.CONTAINS
   },
   {
     label: isLanguagePtBr ? "N\xE3o cont\xE9m" : "Does not contain",
-    value: import_api3.FilterMatchMode.NOT_CONTAINS
+    value: import_api4.FilterMatchMode.NOT_CONTAINS
   }
 ];
 var getDefaultFilterMatchOptionsDate = (isLanguagePtBr) => [
   {
     label: isLanguagePtBr ? "Data antes de" : "Date before",
-    value: import_api3.FilterMatchMode.DATE_BEFORE
+    value: import_api4.FilterMatchMode.DATE_BEFORE
   },
   {
     label: isLanguagePtBr ? "Data depois de" : "Date after",
-    value: import_api3.FilterMatchMode.DATE_AFTER
+    value: import_api4.FilterMatchMode.DATE_AFTER
   }
 ];
 var getDefaultFilterMatchOptionsEnum = (isLanguagePtBr) => [
   {
     label: isLanguagePtBr ? "Igual" : "Equals",
-    value: import_api3.FilterMatchMode.EQUALS
+    value: import_api4.FilterMatchMode.EQUALS
   },
   {
     label: isLanguagePtBr ? "Diferente" : "Not equals",
-    value: import_api3.FilterMatchMode.NOT_EQUALS
+    value: import_api4.FilterMatchMode.NOT_EQUALS
   },
   {
     label: isLanguagePtBr ? "Vazio" : "Empty",
@@ -1229,19 +1306,20 @@ var getDefaultFilterMatchOptionsEnum = (isLanguagePtBr) => [
 var getDefaultFilterMatchOptionsEnumNotNullable = (isLanguagePtBr) => [
   {
     label: isLanguagePtBr ? "Igual" : "Equals",
-    value: import_api3.FilterMatchMode.EQUALS
+    value: import_api4.FilterMatchMode.EQUALS
   },
   {
     label: isLanguagePtBr ? "Diferente" : "Not equals",
-    value: import_api3.FilterMatchMode.NOT_EQUALS
+    value: import_api4.FilterMatchMode.NOT_EQUALS
   }
 ];
 
 // src/index.tsx
-var import_api4 = require("primereact/api");
+var import_api5 = require("primereact/api");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  CustomFilterElement,
   DataTableAdvancedFilter,
   DateFilterTemplate,
   DateTimeFilterTemplate,
@@ -1250,6 +1328,7 @@ var import_api4 = require("primereact/api");
   ModalBase,
   SelectFilterTemplate,
   ValueFilterTemplate,
+  customMatchModes,
   getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable,

package/dist/index.mjs

@@ -190,6 +190,7 @@ function TooltipCustom({ label, id }) {
       className: "tooltip-icone",
       opacity: 1,
       place: "top",
+      content: label,
       anchorSelect: `#${id}`,
       style: {
         zIndex: 9999
@@ -415,6 +416,7 @@ function DynamicColumns({
           filter: !isActionsCol,
           frozen: col.frozen,
           alignFrozen: col.alignFrozen,
+          showFilterMatchModes: col.showFilterMatchModes,
           dataType: col.dataType,
           hidden: col.hidden,
           filterElement: col.filterElement ? (options) => col.filterElement?.(options, col.mask) ?? void 0 : void 0,
@@ -444,6 +446,7 @@ function DynamicColumns({
 }
 
 // src/utils/DataTableUtils.tsx
+import { FilterMatchMode as FilterMatchMode3, FilterOperator } from "primereact/api";
 var getUrlParams = (sortFieldInitial, sortOrderInitial) => {
   const params = new URLSearchParams(
     typeof window !== "undefined" ? window.location.search : ""
@@ -717,11 +720,8 @@ function DataTableAdvancedFilterWrapper({
                 ...filters[key]?.filterFieldCollection && {
                   filterFieldCollection: filters[key].filterFieldCollection
                 },
-                ...filters[key]?.campoId && {
-                  campoId: filters[key].campoId
-                },
-                ...filters[key]?.operator && {
-                  operator: filters[key].operator
+                ...filters[key]?.fieldId && {
+                  fieldId: filters[key].fieldId
                 }
               };
             }
@@ -962,7 +962,8 @@ function DataTableAdvancedFilter({
 
 // src/components/DataTableAdvancedFilter/FilterTemplates.tsx
 import Select from "react-select";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var DateFilterTemplate = (options, mask) => {
   const parsedValue = options.value && typeof options.value === "string" ? /* @__PURE__ */ new Date(options.value + "T00:00:00") : options.value;
   return /* @__PURE__ */ jsx11(
@@ -1092,9 +1093,79 @@ var SelectFilterTemplate = (options, isLanguagePtBr = true, items = []) => {
     }
   );
 };
+var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
+  const resolvedItems = items ?? getDefaultFilterMatchOptionsString(isLanguagePtBr);
+  const currentFilter = options.value ?? {};
+  const currentValue = currentFilter.value ?? null;
+  const currentMatchMode = currentFilter.matchMode ?? "contains";
+  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "filter-wrapper",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        minWidth: "200px"
+      },
+      children: [
+        /* @__PURE__ */ jsx11(
+          Dropdown,
+          {
+            value: currentMatchMode,
+            options: resolvedItems,
+            optionLabel: "label",
+            optionValue: "value",
+            placeholder: "Tipo de filtro",
+            style: { width: "100%" },
+            onChange: (e) => {
+              const newMatchMode = e.value;
+              const isNewSpecial = newMatchMode === customMatchModes.empty || newMatchMode === customMatchModes.notEmpty;
+              if (isNewSpecial) {
+                options.filterCallback({
+                  value: null,
+                  matchMode: newMatchMode
+                });
+                return;
+              }
+              options.filterCallback({
+                value: null,
+                matchMode: newMatchMode
+              });
+            }
+          }
+        ),
+        !isSpecial && /* @__PURE__ */ jsx11(
+          InputText,
+          {
+            value: currentValue ?? "",
+            placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
+            style: { width: "100%" },
+            className: "p-column-filter",
+            onChange: (e) => {
+              const value = e.target.value;
+              if (value.trim()) {
+                options.filterCallback({
+                  value,
+                  matchMode: currentMatchMode
+                });
+              } else {
+                options.filterCallback({
+                  value: null,
+                  matchMode: currentMatchMode
+                });
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 
 // src/components/DataTableAdvancedFilter/filterModes.ts
-import { FilterMatchMode as FilterMatchMode3 } from "primereact/api";
+import { FilterMatchMode as FilterMatchMode4 } from "primereact/api";
 var customMatchModes = {
   notStartsWith: "notStartsWith",
   notEndsWith: "notEndsWith",
@@ -1104,23 +1175,23 @@ var customMatchModes = {
 var getDefaultFilterMatchOptionsString = (isLanguagePtBr = true) => [
   {
     label: isLanguagePtBr ? "Cont\xE9m" : "Contains",
-    value: FilterMatchMode3.CONTAINS
+    value: FilterMatchMode4.CONTAINS
   },
   {
     label: isLanguagePtBr ? "N\xE3o cont\xE9m" : "Does not contain",
-    value: FilterMatchMode3.NOT_CONTAINS
+    value: FilterMatchMode4.NOT_CONTAINS
   },
   {
     label: isLanguagePtBr ? "Igual" : "Equals",
-    value: FilterMatchMode3.EQUALS
+    value: FilterMatchMode4.EQUALS
   },
   {
     label: isLanguagePtBr ? "Diferente" : "Not equals",
-    value: FilterMatchMode3.NOT_EQUALS
+    value: FilterMatchMode4.NOT_EQUALS
   },
   {
     label: isLanguagePtBr ? "Come\xE7a com" : "Starts with",
-    value: FilterMatchMode3.STARTS_WITH
+    value: FilterMatchMode4.STARTS_WITH
   },
   {
     label: isLanguagePtBr ? "N\xE3o come\xE7a com" : "Does not start with",
@@ -1128,7 +1199,7 @@ var getDefaultFilterMatchOptionsString = (isLanguagePtBr = true) => [
   },
   {
     label: isLanguagePtBr ? "Termina com" : "Ends with",
-    value: FilterMatchMode3.ENDS_WITH
+    value: FilterMatchMode4.ENDS_WITH
   },
   {
     label: isLanguagePtBr ? "N\xE3o termina com" : "Does not end with",
@@ -1137,36 +1208,40 @@ var getDefaultFilterMatchOptionsString = (isLanguagePtBr = true) => [
   {
     label: isLanguagePtBr ? "Vazio" : "Empty",
     value: customMatchModes.empty
+  },
+  {
+    label: isLanguagePtBr ? "N\xE3o Vazio" : "NotEmpty",
+    value: customMatchModes.notEmpty
   }
 ];
 var getDefaultFilterMatchOptionsStringArray = (isLanguagePtBr = true) => [
   {
     label: isLanguagePtBr ? "Cont\xE9m" : "Contains",
-    value: FilterMatchMode3.CONTAINS
+    value: FilterMatchMode4.CONTAINS
   },
   {
     label: isLanguagePtBr ? "N\xE3o cont\xE9m" : "Does not contain",
-    value: FilterMatchMode3.NOT_CONTAINS
+    value: FilterMatchMode4.NOT_CONTAINS
   }
 ];
 var getDefaultFilterMatchOptionsDate = (isLanguagePtBr) => [
   {
     label: isLanguagePtBr ? "Data antes de" : "Date before",
-    value: FilterMatchMode3.DATE_BEFORE
+    value: FilterMatchMode4.DATE_BEFORE
   },
   {
     label: isLanguagePtBr ? "Data depois de" : "Date after",
-    value: FilterMatchMode3.DATE_AFTER
+    value: FilterMatchMode4.DATE_AFTER
   }
 ];
 var getDefaultFilterMatchOptionsEnum = (isLanguagePtBr) => [
   {
     label: isLanguagePtBr ? "Igual" : "Equals",
-    value: FilterMatchMode3.EQUALS
+    value: FilterMatchMode4.EQUALS
   },
   {
     label: isLanguagePtBr ? "Diferente" : "Not equals",
-    value: FilterMatchMode3.NOT_EQUALS
+    value: FilterMatchMode4.NOT_EQUALS
   },
   {
     label: isLanguagePtBr ? "Vazio" : "Empty",
@@ -1180,26 +1255,28 @@ var getDefaultFilterMatchOptionsEnum = (isLanguagePtBr) => [
 var getDefaultFilterMatchOptionsEnumNotNullable = (isLanguagePtBr) => [
   {
     label: isLanguagePtBr ? "Igual" : "Equals",
-    value: FilterMatchMode3.EQUALS
+    value: FilterMatchMode4.EQUALS
   },
   {
     label: isLanguagePtBr ? "Diferente" : "Not equals",
-    value: FilterMatchMode3.NOT_EQUALS
+    value: FilterMatchMode4.NOT_EQUALS
   }
 ];
 
 // src/index.tsx
-import { FilterMatchMode as FilterMatchMode4, FilterOperator } from "primereact/api";
+import { FilterMatchMode as FilterMatchMode5, FilterOperator as FilterOperator2 } from "primereact/api";
 export {
   Button,
+  CustomFilterElement,
   DataTableAdvancedFilter,
   DateFilterTemplate,
   DateTimeFilterTemplate,
-  FilterMatchMode4 as FilterMatchMode,
-  FilterOperator,
+  FilterMatchMode5 as FilterMatchMode,
+  FilterOperator2 as FilterOperator,
   ModalBase,
   SelectFilterTemplate,
   ValueFilterTemplate,
+  customMatchModes,
   getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable,

package/dist/styles/table.css

@@ -125,7 +125,7 @@ th {
   border-top: 1px solid #edf0f2;
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 0 14px;
+  padding: 0 0 0 7px;
   font-size: 14px;
   font-family: "Roboto", sans-serif;
   font-weight: bold;
@@ -135,7 +135,7 @@ th {
 td {
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 5px 1rem;
+  padding: 1.5px 7px;
 }
 
 .p-datatable .p-datatable-header {
@@ -157,10 +157,6 @@ td {
   background: #fff url("../assets/images/seta.svg") no-repeat right 6px center;
 }
 
-.react-tooltip {
-  z-index: 99 !important;
-}
-
 .p-paginator-left-content {
   flex: 1;
 }
@@ -175,7 +171,7 @@ th {
   font-weight: bold;
 }
 
-.p-datatable .p-datatable-tbody>tr {
+.p-datatable .p-datatable-tbody > tr {
   background: #fff;
   color: #000;
   font-family: "roboto", sans-serif;
@@ -205,13 +201,43 @@ th {
   left: -2px;
 }
 
-.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight
+  .p-checkbox-box {
   border-color: #094394;
   background: #094394;
   color: #ffffff;
 }
 
-.p-datatable .p-datatable-tbody>tr.p-highlight {
+.p-datatable .p-datatable-tbody > tr > td.p-selection-column {
+  text-align: center !important;
+  display: table-cell;
+  vertical-align: middle;
+  position: relative;
+}
+
+.p-datatable .p-datatable-tbody > tr > td.p-selection-column .p-checkbox {
+  position: relative;
+  left: -2px;
+}
+
+.p-datatable .p-datatable-thead > tr > th.p-selection-column .p-checkbox-input {
+  text-align: center !important;
+  position: relative;
+  left: -1rem;
+}
+
+.p-selection-column .p-checkbox {
+  display: inline-flex;
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+}
+
+.p-column-header-content .p-checkbox {
+  position: static;
+}
+
+.p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #fafbfc;
 }
 
@@ -347,6 +373,7 @@ th {
 
 .p-column-title {
   flex: 1;
+  text-align: left;
 }
 
 .p-column-filter-add-button {
@@ -360,7 +387,7 @@ th {
   padding: 10px 0;
 }
 
-.p-column-filter-add-button>svg {
+.p-column-filter-add-button > svg {
   width: 12px;
   height: 12px;
 }
@@ -404,7 +431,7 @@ th {
   padding: 10px 0 0 0;
 }
 
-.p-column-filter-remove-button>svg {
+.p-column-filter-remove-button > svg {
   width: 12px;
   height: 12px;
 }
@@ -417,8 +444,8 @@ th {
   z-index: 99;
 }
 
-.NextPage>svg,
-.PrevPage>svg {
+.NextPage > svg,
+.PrevPage > svg {
   fill: #fff;
 }
 
@@ -473,14 +500,9 @@ th {
 }
 
 .box-icones-actions-column {
-  position: fixed;
-  z-index: 2;
-  padding: 0.125rem;
   width: fit-content;
   height: fit-content;
   margin: auto;
-  right: 6px;
-  transform: translate( -50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -489,6 +511,22 @@ th {
   transition: opacity 0.2s ease;
 }
 
+.p-datatable .p-datatable-tbody > tr > td:last-child {
+  position: sticky !important;
+  right: 0;
+  z-index: 11;
+  border-left: transparent;
+  border-right: transparent;
+}
+
+.p-datatable .p-datatable-tbody > tr > td:nth-last-child(2) {
+  border-right: 1px solid #edf0f2 !important;
+}
+
+.react-tooltip {
+  z-index: 99 !important;
+}
+
 .box-icones-actions-column:hover {
   opacity: 1;
 }
@@ -542,7 +580,6 @@ th {
 }
 
 @media (max-width: 567px) {
-
   .disablePagination,
   .paginatorLeft {
     display: grid;
@@ -552,4 +589,10 @@ th {
   .custom-select {
     min-width: 100%;
   }
-}
+}
+
+.p-datatable .p-datatable-thead > tr > th:last-child .p-column-title {
+  flex: 1;
+  text-align: center;
+  padding: 0 17px 0 7px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",