diff --git a/src/components/table/EnhancedTable.tsx b/src/components/table/EnhancedTable.tsx
index 38639c2..a4746b0 100644
--- a/src/components/table/EnhancedTable.tsx
+++ b/src/components/table/EnhancedTable.tsx
@@ -1,25 +1,29 @@
 import {
   createMemo,
   For,
+  Show,
   splitProps,
-  type JSX,
-  type Component,
   type Accessor,
+  type JSX,
 } from "solid-js";
 import {
   createSolidTable,
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
   type ColumnDef,
   type SortingState,
   type ColumnFiltersState,
   type PaginationState,
-  getFilteredRowModel,
-  getPaginationRowModel,
   type OnChangeFn,
 } from "@tanstack/solid-table";
 import Table, { type TableProps } from "./Table";
+import Button from "../button/Button";
+import Input from "../input/Input";
+import Select from "../select/Select";
+import Loading from "../loading/Loading";
 
 export type EnhancedTableProps<TData> = Omit<TableProps, "children"> & {
   data: TData[];
@@ -30,11 +34,15 @@ export type EnhancedTableProps<TData> = Omit<TableProps, "children"> & {
   setColumnFilters?: OnChangeFn<ColumnFiltersState>;
   pagination?: Accessor<PaginationState>;
   setPagination?: OnChangeFn<PaginationState>;
+  globalFilter?: Accessor<string>;
+  setGlobalFilter?: OnChangeFn<string>;
   enableSorting?: boolean;
   enableFilters?: boolean;
   enablePagination?: boolean;
   renderRowSubComponent?: (props: { row: any }) => JSX.Element;
   renderEmpty?: () => JSX.Element;
+  loading?: boolean;
+  renderLoading?: () => JSX.Element;
 };
 
 function EnhancedTable<TData>(props: EnhancedTableProps<TData>): JSX.Element {
@@ -47,11 +55,15 @@ function EnhancedTable<TData>(props: EnhancedTableProps<TData>): JSX.Element {
     "setColumnFilters",
     "pagination",
     "setPagination",
+    "globalFilter",
+    "setGlobalFilter",
     "enableSorting",
     "enableFilters",
     "enablePagination",
     "renderRowSubComponent",
     "renderEmpty",
+    "loading",
+    "renderLoading",
   ]);
 
   const table = createSolidTable({
@@ -71,10 +83,14 @@ function EnhancedTable<TData>(props: EnhancedTableProps<TData>): JSX.Element {
       get pagination() {
         return local.pagination?.() || { pageIndex: 0, pageSize: 10 };
       },
+      get globalFilter() {
+        return local.globalFilter?.() || "";
+      },
     },
     onSortingChange: local.setSorting,
     onColumnFiltersChange: local.setColumnFilters,
     onPaginationChange: local.setPagination,
+    onGlobalFilterChange: local.setGlobalFilter,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -85,48 +101,113 @@ function EnhancedTable<TData>(props: EnhancedTableProps<TData>): JSX.Element {
   });
 
   const tableRows = createMemo(() => {
+    if (local.loading) return [];
     const rows = table.getRowModel().rows;
-    if (rows.length === 0 && local.renderEmpty) {
-      return [];
-    }
+    if (rows.length === 0 && local.renderEmpty) return [];
     return rows;
   });
 
+  const headerGroups = () => table.getHeaderGroups();
+  const leafHeaders = () =>
+    headerGroups().length > 0
+      ? headerGroups()[headerGroups().length - 1].headers
+      : [];
+
   return (
     <Table {...tableProps}>
-      <Table.Head>
-        <For each={table.getHeaderGroups()}>
-          {(headerGroup) => (
-            <For each={headerGroup.headers}>
+      {/* Toolbar */}
+      <caption class="mb-3 text-left">
+        <div class="flex items-center gap-2">
+          <div class="join">
+            <Input
+              size="sm"
+              placeholder="Search…"
+              value={(table.getState().globalFilter as string) ?? ""}
+              onInput={(e) => {
+                const val = (e.currentTarget as HTMLInputElement).value;
+                clearTimeout((window as any).__t);
+                (window as any).__t = setTimeout(
+                  () => table.setGlobalFilter(val),
+                  300
+                );
+              }}
+            />
+            <Button
+              size="sm"
+              color="neutral"
+              onClick={() => table.setGlobalFilter("")}
+            >
+              Clear
+            </Button>
+          </div>
+        </div>
+      </caption>
+
+      <Table.Head noCell>
+        {/* Fila de headers */}
+        <For each={headerGroups()}>
+          {(hg) => (
+            <tr>
+              <For each={hg.headers}>
+                {(header) => (
+                  <Table.HeadCell
+                    class={
+                      header.column.getCanSort()
+                        ? "cursor-pointer select-none"
+                        : ""
+                    }
+                    onClick={
+                      header.column.getCanSort()
+                        ? header.column.getToggleSortingHandler()
+                        : undefined
+                    }
+                  >
+                    <div class="flex items-center gap-2">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      {header.column.getIsSorted() === "asc" && <span>↑</span>}
+                      {header.column.getIsSorted() === "desc" && <span>↓</span>}
+                    </div>
+                  </Table.HeadCell>
+                )}
+              </For>
+            </tr>
+          )}
+        </For>
+
+        <Show when={local.enableFilters}>
+          <tr>
+            <For each={leafHeaders()}>
               {(header) => (
-                <Table.HeadCell
-                  class={
-                    header.column.getCanSort()
-                      ? "cursor-pointer select-none"
-                      : ""
-                  }
-                  onClick={
-                    header.column.getCanSort()
-                      ? header.column.getToggleSortingHandler()
-                      : undefined
-                  }
-                >
-                  <div class="flex items-center gap-2">
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    {header.column.getIsSorted() === "asc" && <span>↑</span>}
-                    {header.column.getIsSorted() === "desc" && <span>↓</span>}
-                  </div>
+                <Table.HeadCell>
+                  {header.isPlaceholder ||
+                  !header.column.getCanFilter() ? null : (
+                    <ColumnFilter column={header.column} />
+                  )}
                 </Table.HeadCell>
               )}
             </For>
-          )}
-        </For>
+          </tr>
+        </Show>
       </Table.Head>
+
       <Table.Body>
-        {tableRows().length === 0 && local.renderEmpty ? (
+        {local.loading ? (
+          <Table.Row>
+            <Table.Cell
+              colSpan={table.getAllColumns().length}
+              class="text-center py-6"
+            >
+              {local.renderLoading ? (
+                local.renderLoading()
+              ) : (
+                <Loading variant="spinner" size="lg" color="primary" />
+              )}
+            </Table.Cell>
+          </Table.Row>
+        ) : tableRows().length === 0 && local.renderEmpty ? (
           <Table.Row>
             <Table.Cell
               colSpan={table.getAllColumns().length}
@@ -138,33 +219,156 @@ function EnhancedTable<TData>(props: EnhancedTableProps<TData>): JSX.Element {
         ) : (
           <For each={tableRows()}>
             {(row) => (
-              <>
-                <Table.Row class={row.getIsExpanded() ? "bg-base-200" : ""}>
-                  <For each={row.getVisibleCells()}>
-                    {(cell) => (
-                      <Table.Cell>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </Table.Cell>
-                    )}
-                  </For>
-                </Table.Row>
-                {row.getIsExpanded() && local.renderRowSubComponent && (
-                  <Table.Row>
-                    <Table.Cell colSpan={row.getVisibleCells().length}>
-                      {local.renderRowSubComponent({ row })}
+              <Table.Row>
+                <For each={row.getVisibleCells()}>
+                  {(cell) => (
+                    <Table.Cell>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </Table.Cell>
-                  </Table.Row>
-                )}
-              </>
+                  )}
+                </For>
+              </Table.Row>
             )}
           </For>
         )}
       </Table.Body>
+
+      <Table.Footer noCell>
+        <div class="flex items-center justify-between w-full">
+          <div class="flex items-center gap-2">
+            <span class="opacity-70">Rows per page</span>
+            <Select
+              size="sm"
+              value={String(table.getState().pagination.pageSize)}
+              onChange={(e) =>
+                table.setPageSize(
+                  Number((e.currentTarget as HTMLSelectElement).value)
+                )
+              }
+            >
+              <option value="10">10</option>
+              <option value="25">25</option>
+              <option value="50">50</option>
+              <option value="100">100</option>
+            </Select>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="opacity-70">
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount() || 1}
+            </span>
+            <div class="join">
+              <Button
+                size="sm"
+                disabled={!table.getCanPreviousPage()}
+                onClick={() => table.setPageIndex(0)}
+              >
+                |⟪
+              </Button>
+              <Button
+                size="sm"
+                disabled={!table.getCanPreviousPage()}
+                onClick={() => table.previousPage()}
+              >
+                Prev
+              </Button>
+              <Button
+                size="sm"
+                disabled={!table.getCanNextPage()}
+                onClick={() => table.nextPage()}
+              >
+                Next
+              </Button>
+              <Button
+                size="sm"
+                disabled={!table.getCanNextPage()}
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              >
+                ⟫|
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Table.Footer>
     </Table>
   );
 }
 
+function ColumnFilter(props: { column: any }) {
+  const col = props.column;
+  const value = () => col.getFilterValue() as any;
+  const type = col.columnDef.meta?.filterType ?? "text";
+
+  if (type === "text") {
+    return (
+      <Input
+        size="xs"
+        placeholder="Filter…"
+        value={value() ?? ""}
+        onInput={(e) =>
+          col.setFilterValue(
+            (e.currentTarget as HTMLInputElement).value || undefined
+          )
+        }
+      />
+    );
+  }
+
+  if (type === "numberRange") {
+    const v: [string?, string?] = value() ?? [undefined, undefined];
+    const setRange = (min?: string, max?: string) => {
+      if (!min && !max) return col.setFilterValue(undefined);
+      col.setFilterValue([min || undefined, max || undefined]);
+    };
+    return (
+      <div class="flex gap-1">
+        <Input
+          size="xs"
+          type="number"
+          placeholder="Min"
+          value={v[0] ?? ""}
+          onInput={(e) =>
+            setRange((e.currentTarget as HTMLInputElement).value, v[1])
+          }
+        />
+        <Input
+          size="xs"
+          type="number"
+          placeholder="Max"
+          value={v[1] ?? ""}
+          onInput={(e) =>
+            setRange(v[0], (e.currentTarget as HTMLInputElement).value)
+          }
+        />
+      </div>
+    );
+  }
+
+  if (type === "select") {
+    const options: Array<{ label: string; value: string }> =
+      col.columnDef.meta?.options ?? [];
+    return (
+      <Select
+        size="xs"
+        value={value() ?? ""}
+        onChange={(e) =>
+          col.setFilterValue(
+            (e.currentTarget as HTMLSelectElement).value || undefined
+          )
+        }
+      >
+        <option value="">All</option>
+        <For each={options}>
+          {(o) => <option value={o.value}>{o.label}</option>}
+        </For>
+      </Select>
+    );
+  }
+
+  return null;
+}
+
 export default EnhancedTable;
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
index 827d754..feb9155 100644
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -9,7 +9,6 @@ import TableRow from "./TableRow";
 import TableFooter from "./TableFooter";
 import TableCell from "./TableCell";
 import TableHeadCell from "./TableHeadCell";
-import EnhancedTable from "./EnhancedTable";
 
 export type TableProps = JSX.HTMLAttributes<HTMLTableElement> &
   IComponentBaseProps & {
@@ -63,5 +62,4 @@ export default Object.assign(Table, {
   Footer: TableFooter,
   Cell: TableCell,
   HeadCell: TableHeadCell,
-  Enhanced: EnhancedTable,
 });
diff --git a/src/components/table/TableHead.tsx b/src/components/table/TableHead.tsx
index 89d7676..ab30732 100644
--- a/src/components/table/TableHead.tsx
+++ b/src/components/table/TableHead.tsx
@@ -4,6 +4,7 @@ import {
   JSX,
   createMemo,
   children as resolveChildren,
+  Show,
 } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -28,7 +29,9 @@ const TableHead: Component<TableHeadProps> = (props) => {
 
   return (
     <thead class={classes()} data-theme={local.dataTheme} {...rest}>
-      <tr>{resolved()}</tr>
+      <Show when={local.noCell} fallback={<tr>{resolved()}</tr>}>
+        {resolved()}
+      </Show>
     </thead>
   );
 };
diff --git a/src/components/table/index.ts b/src/components/table/index.ts
index b1dd4ce..49d74e3 100644
--- a/src/components/table/index.ts
+++ b/src/components/table/index.ts
@@ -1,3 +1,5 @@
 export { default } from "./Table";
 export type { TableProps } from "./Table";
+
+export { default as EnhancedTable } from "./EnhancedTable";
 export type { EnhancedTableProps } from "./EnhancedTable";
diff --git a/src/index.ts b/src/index.ts
index be29ce6..8df0a58 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -109,7 +109,7 @@ export {
   type SvgBackgroundProps,
 } from "./components/svgbackground";
 export { default as Swap } from "./components/swap";
-export { default as Table } from "./components/table";
+export { default as Table, EnhancedTable } from "./components/table";
 export type { TableProps } from "./components/table";
 export type { EnhancedTableProps } from "./components/table/EnhancedTable";
 export { default as Tabs } from "./components/tabs";