@tint-ui/data-table 0.3.5

package/cjs/adapters/number-format.js

@@ -0,0 +1,46 @@
+"use strict";
+
+exports.__esModule = true;
+exports.numberFormat = numberFormat;
+const nobrSpace = "\xa0";
+const ditSign = ".";
+function numberFormat(value, decimal = 2, decimalRequired = false) {
+  let number = String(value);
+  const ended = number.indexOf(".");
+  let end = "";
+  if (ended !== -1) {
+    end = number.substring(ended + 1);
+    if (end.length > decimal) {
+      if (decimal > 0) {
+        const endNum = parseInt(end.substring(0, decimal));
+        end = endNum === 0 ? "" : String(endNum);
+      } else {
+        end = "";
+      }
+    }
+    if (end.length) {
+      end = ditSign + end;
+    }
+    number = number.substring(0, ended);
+  }
+  if (decimalRequired && decimal > 0) {
+    if (!end) {
+      end = ".";
+    }
+    const delta = end.length - 1;
+    if (delta > 0 && delta < decimal) {
+      end += "0".repeat(delta);
+    }
+  }
+  let len = number.length;
+  if (len < 4) {
+    return number + end;
+  }
+  let ceil = "";
+  while (len > 3) {
+    len -= 3;
+    ceil = nobrSpace + number.substring(len) + ceil;
+    number = number.substring(0, len);
+  }
+  return number + ceil + end;
+}

package/cjs/adapters/number.js

@@ -0,0 +1,56 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+exports.__esModule = true;
+exports.numberAdapterOptions = exports.numberAdapter = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _numberFormat = require("./number-format");
+var _classes = require("../classes");
+const NumberType = props => {
+  const {
+    value,
+    format,
+    prefix,
+    suffix,
+    decimal = 2,
+    decimalRequired = false
+  } = props;
+  const numberValue = typeof value === "number" ? value : parseFloat(String(value));
+  const numberIsNaN = !Number.isFinite(numberValue);
+  let node;
+  if (numberIsNaN) {
+    node = Number.isNaN(numberValue) ? "NaN" : "Infinite";
+  } else {
+    if (format) {
+      node = (0, _numberFormat.numberFormat)(numberValue, decimal, decimalRequired);
+    } else {
+      node = String(numberValue);
+    }
+    if (prefix) {
+      node = prefix + node;
+    }
+    if (suffix) {
+      node += suffix;
+    }
+  }
+  const classes = (0, _classes.useDataTableClasses)();
+  return /*#__PURE__*/React.createElement("span", {
+    className: classes.numberCellType + (numberIsNaN ? ` ${classes.isNaN}` : "")
+  }, node);
+};
+NumberType.displayName = "NumberType";
+const numberAdapter = (value, cell) => {
+  return /*#__PURE__*/React.createElement(NumberType, (0, _extends2.default)({
+    value: value
+  }, cell.config));
+};
+exports.numberAdapter = numberAdapter;
+const numberAdapterOptions = exports.numberAdapterOptions = {
+  nullable() {
+    return "";
+  },
+  align: "end"
+};

package/cjs/adapters/text.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.textAdapterOptions = exports.textAdapter = void 0;
+const textAdapter = value => {
+  return String(value);
+};
+exports.textAdapter = textAdapter;
+const textAdapterOptions = exports.textAdapterOptions = {
+  nullable() {
+    return "";
+  }
+};

package/cjs/cell-adapter-type.js

@@ -0,0 +1,312 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.renderDataTableCell = exports.hasCellAdapter = exports.addCellAdapterAsync = exports.addCellAdapter = exports.DataTableHead = exports.DataTableCell = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _reactTable = require("@tanstack/react-table");
+var _table = require("@tint-ui/table");
+var _proof = require("@tint-ui/tools/proof");
+var _errorMessage = require("@tint-ui/tools/error-message");
+var _adapters = require("./adapters");
+var _classes = require("./classes");
+var _context = require("./context");
+const _excluded = ["cell", "withWidth", "style"],
+  _excluded2 = ["header", "withWidth", "children", "style"];
+const adapters = new Map();
+const defaultAdapters = new Map();
+Object.entries(_adapters.adapters).forEach(([name, {
+  adapter,
+  options
+}]) => {
+  defaultAdapters.set(name, {
+    adapter,
+    options
+  });
+});
+const getAdapt = type => {
+  const adapter = adapters.get(type) || defaultAdapters.get(type);
+  if (!adapter) {
+    return null;
+  }
+  return adapter;
+};
+const privateTypes = [];
+const checkAdapt = type => {
+  if (!type) {
+    throw new Error(`Adapter type is empty`);
+  }
+  if (privateTypes.includes(type)) {
+    throw new Error(`The ${type} type is private`);
+  }
+  if (adapters.has(type)) {
+    throw new Error(`The ${type} form adapter already exists`);
+  }
+};
+const hasCellAdapter = type => adapters.has(type);
+exports.hasCellAdapter = hasCellAdapter;
+const addCellAdapter = function (name, adapter, options = {}) {
+  checkAdapt(name);
+  adapters.set(name, {
+    adapter,
+    options
+  });
+};
+exports.addCellAdapter = addCellAdapter;
+const addCellAdapterAsync = function (name, handler, options = {}) {
+  checkAdapt(name);
+  adapters.set(name, {
+    adapter: createAsyncAdapterCallback(name, handler, options),
+    options
+  });
+};
+exports.addCellAdapterAsync = addCellAdapterAsync;
+const getAsyncAdapter = function (type, result) {
+  const adapter = result?.default;
+  (0, _proof.invariant)(typeof adapter === "function", `Async ${type} adapter failure: default is not function`);
+  return adapter;
+};
+const createAsyncAdapterCallback = function (type, handler, options) {
+  const adapt = {
+    waiters: new Set(),
+    handler,
+    error: null,
+    options
+  };
+  const adapter = (value, cell, data) => {
+    return /*#__PURE__*/React.createElement(DataTableCellAdapterAsync, {
+      adapt: adapt,
+      type: type,
+      value: value,
+      cell: cell,
+      data: data
+    });
+  };
+  adapt.adapter = adapter;
+  return adapter;
+};
+const createAsyncPromise = async (type, adapt) => {
+  try {
+    const result = await adapt.handler();
+    const adapter = getAsyncAdapter(type, result);
+    adapt.error = null;
+    adapt.adapter = adapter;
+    adapters.set(type, {
+      adapter,
+      options: adapt.options
+    });
+  } catch (err) {
+    adapt.error = (0, _errorMessage.errorMessage)(err).message;
+  }
+  let event;
+  if (adapt.error != null) {
+    event = {
+      error: adapt.error
+    };
+  } else if (adapt.adapter) {
+    event = {
+      adapter: adapt.adapter
+    };
+  } else {
+    return;
+  }
+  const handlers = Array.from(adapt.waiters.values());
+  adapt.waiters.clear();
+  handlers.forEach(handler => {
+    handler(event);
+  });
+};
+const DataTableCellAdapterAsync = props => {
+  const classes = (0, _classes.useDataTableClasses)();
+  const {
+    adapt,
+    cell,
+    value,
+    data,
+    type
+  } = props;
+  const [state, setState] = React.useState(() => {
+    return adapt.adapter ? {
+      adapter: adapt.adapter
+    } : adapt.error != null ? {
+      error: adapt.error
+    } : null;
+  });
+  React.useEffect(() => {
+    const {
+      adapter,
+      error,
+      promise
+    } = adapt;
+    if (error != null || adapter != null) {
+      return;
+    }
+    if (promise == null) {
+      adapt.promise = createAsyncPromise(type, adapt);
+    }
+    adapt.waiters.add(setState);
+    return () => {
+      adapt.waiters.delete(setState);
+    };
+  }, [type, adapt]);
+  if (state == null) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.loader
+    });
+  }
+  if ("error" in state) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.error
+    }, state.error);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.adapter(value, cell, data));
+};
+DataTableCellAdapterAsync.displayName = "DataTableCellAdapterAsync";
+const renderDataTableCell = function (value, cell, data) {
+  const {
+    type = "text"
+  } = cell;
+  const adapt = getAdapt(type);
+  if (!adapt) {
+    (0, _proof.warningOnce)(`table-cell:${type}`, false, `The ${type} cell type not found`);
+    switch (typeof value) {
+      case "string":
+      case "number":
+      case "boolean":
+        return String(value);
+    }
+    return null;
+  }
+  const {
+    adapter
+  } = adapt;
+  if (value != null) {
+    return adapter(value, cell, data);
+  }
+  const {
+    options: {
+      nullable
+    }
+  } = adapt;
+  if (nullable) {
+    return nullable(cell, data);
+  }
+  return null;
+};
+exports.renderDataTableCell = renderDataTableCell;
+const DataTableCell = exports.DataTableCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      cell: tableCell,
+      withWidth,
+      style
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const colDef = tableCell.column.columnDef;
+  const cell = colDef.meta?._cell;
+  const minProps = Object.assign({}, props, {
+    style,
+    ref,
+    "data-cell-id": tableCell.id
+  });
+  if (!cell) {
+    if (withWidth && String(tableCell.column.id).startsWith("__#")) {
+      minProps.style = Object.assign({}, style, {
+        width: "1%"
+      });
+    }
+    return /*#__PURE__*/React.createElement(_table.TableCell, minProps);
+  }
+  const {
+    name,
+    type = "text"
+  } = cell;
+  const adapt = getAdapt(type);
+  if (!adapt) {
+    return /*#__PURE__*/React.createElement(_table.TableCell, (0, _extends2.default)({}, minProps, {
+      "data-cell-name": name
+    }));
+  }
+  let align = "start";
+  const {
+    options
+  } = adapt;
+  if (options.align) {
+    align = options.align;
+  }
+  if (withWidth && options.width) {
+    style = Object.assign({}, style, {
+      width: options.width
+    });
+  }
+  return /*#__PURE__*/React.createElement(_table.TableCell, (0, _extends2.default)({}, minProps, {
+    style: style,
+    align: align,
+    "data-cell-name": name,
+    "data-cell-type": type
+  }));
+});
+DataTableCell.displayName = "DataTableCell";
+const DataTableHead = exports.DataTableHead = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+      header,
+      withWidth,
+      style
+    } = _ref2,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
+  const table = (0, _context.useDataTableContext)();
+  const colDef = header.column.columnDef;
+  const cell = colDef.meta?._cell;
+  const body = header.isPlaceholder ? null : (0, _reactTable.flexRender)(colDef.header, header.getContext());
+  const minProps = Object.assign({}, props, {
+    ref,
+    style,
+    "data-cell-id": header.id
+  });
+  if (!cell || body == null) {
+    if (withWidth && String(header.column.id).startsWith("__#")) {
+      minProps.style = Object.assign({}, style, {
+        width: "1%"
+      });
+    }
+    return /*#__PURE__*/React.createElement(_table.TableHead, minProps, body);
+  }
+  const {
+    name,
+    type = "text"
+  } = cell;
+  let node = body;
+  let align = "start";
+  const adapt = getAdapt(type);
+  if (adapt) {
+    const {
+      options
+    } = adapt;
+    if (options.align) {
+      align = options.align;
+    }
+    if (withWidth && options.width) {
+      style = Object.assign({}, style, {
+        width: options.width
+      });
+    }
+  }
+  if (header.column.getCanSort()) {
+    const sorted = header.column.getIsSorted();
+    node = /*#__PURE__*/React.createElement(_table.TableButtonSort, {
+      disabled: table.loading,
+      direction: sorted ? sorted : "none",
+      onClick: header.column.getToggleSortingHandler()
+    }, node);
+  }
+  return /*#__PURE__*/React.createElement(_table.TableHead, (0, _extends2.default)({}, minProps, {
+    style: style,
+    align: align,
+    "data-cell-name": name,
+    "data-cell-type": type
+  }), node);
+});
+DataTableHead.displayName = "DataTableHead";

package/cjs/classes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useDataTableClasses = exports.classes = void 0;
+var _classGroup = require("@tint-ui/tools/class-group");
+var _theme = require("@tint-ui/theme");
+const {
+  base,
+  b
+} = (0, _classGroup.classGroup)("data-table");
+const classes = exports.classes = {
+  dataTable: base,
+  table: b("table"),
+  cellNotFound: b("cell", "not-found"),
+  loader: b("loader"),
+  error: b("error"),
+  booleanCellType: b("cell-type", "boolean"),
+  numberCellType: b("cell-type", "number"),
+  iconTrue: b("icon", "true"),
+  iconFalse: b("icon", "false"),
+  iconNull: b("icon", "null"),
+  isNaN: b("isNaN"),
+  menuGroup: b("menu-group"),
+  menuItemDestructive: b("menu-item-destructive")
+};
+const useDataTableClasses = () => (0, _theme.useClasses)("data-table", classes);
+exports.useDataTableClasses = useDataTableClasses;

package/cjs/context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.useDataTableContext = exports.DataTableContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _proof = require("@tint-ui/tools/proof");
+const DataTableContext = exports.DataTableContext = /*#__PURE__*/React.createContext(null);
+const useDataTableContext = function () {
+  const ctx = React.useContext(DataTableContext);
+  (0, _proof.invariant)(ctx, "DataTableContextType is not defined");
+  return ctx;
+};
+exports.useDataTableContext = useDataTableContext;

package/cjs/data-table-content.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.DataTableContent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactTable = require("@tanstack/react-table");
+var _table = require("@tint-ui/table");
+var _isEmpty = require("@tint-ui/tools/is-empty");
+var _context = require("./context");
+var _cellAdapterType = require("./cell-adapter-type");
+var _classes = require("./classes");
+const _excluded = ["themePropsType", "className", "wrapperProps"];
+const DataTableContent = exports.DataTableContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      themePropsType,
+      className,
+      wrapperProps = {}
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const context = (0, _context.useDataTableContext)();
+  const classes = (0, _classes.useDataTableClasses)();
+  const {
+    table,
+    header: {
+      top,
+      bottom
+    },
+    invisible
+  } = context;
+  const rows = table.getRowModel().rows;
+  const widthArea = {
+    top: top,
+    bottom: bottom && !top,
+    cell: !top && !bottom
+  };
+  let notFound = "";
+  if (rows.length === 0) {
+    const {
+      lexicon
+    } = context;
+    const state = table.getState();
+    if ((0, _isEmpty.isEmpty)(state.globalFilter) && state.columnFilters.length === 0 && state.pagination.pageIndex === 0) {
+      notFound = lexicon.notFound;
+    } else {
+      notFound = lexicon.notFoundFiltered;
+    }
+  }
+  return /*#__PURE__*/React.createElement(_table.Table, (0, _extends2.default)({}, props, {
+    wrapperProps: Object.assign({}, wrapperProps, {
+      className: (0, _clsx.default)(wrapperProps.className, classes.dataTable)
+    }),
+    className: (0, _clsx.default)(className, classes.table),
+    themePropsType: themePropsType,
+    ref: ref
+  }), top && /*#__PURE__*/React.createElement(_table.TableHeader, {
+    themePropsType: themePropsType
+  }, table.getHeaderGroups().map(group => /*#__PURE__*/React.createElement(_table.TableRow, {
+    key: group.id,
+    themePropsType: themePropsType
+  }, group.headers.map(header => invisible[header.column.id] ? null : /*#__PURE__*/React.createElement(_cellAdapterType.DataTableHead, {
+    key: header.id,
+    header: header,
+    themePropsType: themePropsType,
+    withWidth: widthArea.top
+  }))))), /*#__PURE__*/React.createElement(_table.TableBody, {
+    themePropsType: themePropsType
+  }, rows.length === 0 ? /*#__PURE__*/React.createElement(_table.TableRow, {
+    key: "empty",
+    themePropsType: themePropsType
+  }, /*#__PURE__*/React.createElement(_table.TableCell, {
+    colSpan: table.getVisibleLeafColumns().filter(cell => invisible[cell.id] !== true).length,
+    className: classes.cellNotFound
+  }, notFound)) : rows.map((row, index) => {
+    const clickHandler = context.getRowClickHandler(row.original);
+    return /*#__PURE__*/React.createElement(_table.TableRow, {
+      key: row.id,
+      themePropsType: themePropsType,
+      onClick: clickHandler,
+      "data-click": clickHandler != null
+    }, row.getVisibleCells().map(cell => {
+      return invisible[cell.column.id] ? null : /*#__PURE__*/React.createElement(_cellAdapterType.DataTableCell, {
+        key: cell.id,
+        cell: cell,
+        themePropsType: themePropsType,
+        withWidth: widthArea.cell && index === 0
+      }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+    }));
+  })), bottom && /*#__PURE__*/React.createElement(_table.TableFooter, {
+    themePropsType: themePropsType
+  }, table.getHeaderGroups().map(group => /*#__PURE__*/React.createElement(_table.TableRow, {
+    key: group.id,
+    themePropsType: themePropsType
+  }, group.headers.map(header => invisible[header.column.id] ? null : /*#__PURE__*/React.createElement(_cellAdapterType.DataTableHead, {
+    key: header.id,
+    header: header,
+    themePropsType: themePropsType,
+    withWidth: widthArea.bottom
+  }))))));
+});
+DataTableContent.displayName = "DataTableContent";

package/cjs/data-table-pagination.js

@@ -0,0 +1,38 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.DataTablePagination = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _paginationClasses = require("./pagination-classes");
+var _context = require("./context");
+var _paginationSizeOptions = require("./pagination-size-options");
+var _paginationArrow = require("./pagination-arrow");
+var _paginationNumber = require("./pagination-number");
+const _excluded = ["className"];
+const DataTablePagination = exports.DataTablePagination = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const classes = (0, _paginationClasses.useDataTablePaginationClasses)();
+  const {
+    navbar: {
+      mode,
+      size
+    }
+  } = (0, _context.useDataTableContext)();
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, props, {
+    "data-navbar-size": size,
+    className: (0, _clsx.default)(classes.pagination, className),
+    ref: ref
+  }), /*#__PURE__*/React.createElement("span", {
+    className: classes.divider
+  }), /*#__PURE__*/React.createElement(_paginationSizeOptions.PaginationSizeOptions, null), mode === "arrow" ? /*#__PURE__*/React.createElement(_paginationArrow.PaginationArrow, null) : /*#__PURE__*/React.createElement(_paginationNumber.PaginationNumber, null));
+});
+DataTablePagination.displayName = "DataTablePagination";

package/cjs/data-table-text-filter.js

@@ -0,0 +1,83 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.DataTableTextFilter = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _svgIcon = require("@tint-ui/svg-icon");
+var _input = require("@tint-ui/input");
+var _filterClasses = require("./filter-classes");
+var _context = require("./context");
+var _clsx = _interopRequireDefault(require("clsx"));
+const _excluded = ["className", "isMobile"];
+const getFilterText = table => {
+  const text = table.getState().globalFilter;
+  return typeof text === "string" ? text : "";
+};
+const DataTableTextFilter = exports.DataTableTextFilter = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className,
+      isMobile = false
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const classes = (0, _filterClasses.useDataTableFilterClasses)();
+  const {
+    lexicon,
+    table,
+    toolbar: {
+      size
+    }
+  } = (0, _context.useDataTableContext)();
+  const [text, setText] = React.useState(() => getFilterText(table));
+  const focusRef = React.useRef(false);
+  const {
+    resetHandler,
+    inputProps
+  } = React.useMemo(() => {
+    const resetHandler = () => {
+      setText(getFilterText(table));
+    };
+    return {
+      resetHandler,
+      inputProps: {
+        onFocus() {
+          focusRef.current = true;
+        },
+        onBlur() {
+          focusRef.current = false;
+          resetHandler();
+        }
+      }
+    };
+  }, [table]);
+  const filterText = getFilterText(table);
+  React.useEffect(() => {
+    if (filterText !== text && !focusRef.current) {
+      resetHandler();
+    }
+  }, [filterText]);
+  return /*#__PURE__*/React.createElement(_input.InputGroup, (0, _extends2.default)({}, props, {
+    size: size,
+    className: (0, _clsx.default)(classes.text, className, isMobile && classes.textMobile),
+    ref: ref
+  }), /*#__PURE__*/React.createElement(_input.InputAddon, {
+    size: size,
+    variant: "label"
+  }, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+    icon: "search"
+  })), /*#__PURE__*/React.createElement(_input.InputText, (0, _extends2.default)({}, inputProps, {
+    size: size,
+    placeholder: lexicon.search,
+    value: text,
+    onChange: event => {
+      const value = event.target.value;
+      setText(value);
+      table.setGlobalFilter(value);
+    }
+  })));
+});
+DataTableTextFilter.displayName = "DataTableTextFilter";