diff --git a/src/components/DataTable/DataTableFilters.tsx b/src/components/DataTable/DataTableFilters.tsx
new file mode 100644
index 0000000..17106ca
--- /dev/null
+++ b/src/components/DataTable/DataTableFilters.tsx
@@ -0,0 +1,68 @@
+import { Cross2Icon } from "@radix-ui/react-icons";
+import React, { useEffect, useRef } from "react";
+
+import { Trans } from "react-i18next";
+import { Button } from "#/components/ui";
+
+import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
+import { useTableContext } from "./TableContext";
+
+export function DataTableFilters() {
+ // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
+ const { table, filters } = useTableContext();
+
+ if (!table || !filters) {
+ return null;
+ }
+
+ const isFiltered =
+ table.getState().columnFilters.filter((filter) => filter.value.length > 0)
+ .length > 0;
+
+ const initialFilterSet = useRef(false);
+
+ useEffect(() => {
+ if (filters && !initialFilterSet.current) {
+ filters.map((filter) => {
+ const column = table.getColumn(filter.value);
+ if (column) {
+ column.setFilterValue(
+ filter.options
+ .filter((option) => option.defaultSelected)
+ .map((option) => option.value)
+ );
+ }
+ return null;
+ });
+ initialFilterSet.current = true;
+ }
+ }, [filters, table]);
+
+ return (
+
+
+ {filters.map(
+ (filter) =>
+ table.getColumn(filter.value) && (
+
+ )
+ )}
+
+ {isFiltered && (
+
+ )}
+
+ );
+}
diff --git a/src/components/DataTable/DataTableSearch.tsx b/src/components/DataTable/DataTableSearch.tsx
new file mode 100644
index 0000000..238f99c
--- /dev/null
+++ b/src/components/DataTable/DataTableSearch.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+import { Input } from "#/components/ui";
+
+import { useTableContext } from "./TableContext";
+
+export function DataTableSearch({ searchKey = "name" }) {
+ // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
+ const { table, searchKey: TableSeachKey } = useTableContext();
+
+ const search = TableSeachKey || searchKey;
+
+ const { t } = useTranslation();
+
+ return (
+
+ table.getColumn(search)?.setFilterValue(event.target.value)
+ }
+ className="h-8 w-[150px] lg:w-[250px] dark:border-2"
+ />
+ );
+}
diff --git a/src/components/DataTable/DataTableToolbar.tsx b/src/components/DataTable/DataTableToolbar.tsx
index 3c04c77..aa92559 100644
--- a/src/components/DataTable/DataTableToolbar.tsx
+++ b/src/components/DataTable/DataTableToolbar.tsx
@@ -1,86 +1,19 @@
-import { Cross2Icon } from "@radix-ui/react-icons";
-import React, { useEffect, useRef } from "react";
+import React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { Button, Input } from "#/components/ui";
-
-import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
import { DataTableViewOptions } from "./DataTableViewOptions";
-import { useTableContext } from "./TableContext";
+import { DataTableSearch } from "./DataTableSearch";
+import { DataTableFilters } from "./DataTableFilters";
export function DataTableToolbar({
action,
showViewOptions = true,
searchKey = "name",
}) {
- // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
- const { table, filters, searchKey: TableSeachKey } = useTableContext();
-
- const search = TableSeachKey || searchKey;
-
- if (!table || !filters) {
- return null;
- }
-
- const isFiltered =
- table.getState().columnFilters.filter((filter) => filter.value.length > 0)
- .length > 0;
-
- const initialFilterSet = useRef(false);
-
- useEffect(() => {
- if (filters && !initialFilterSet.current) {
- filters.map((filter) => {
- const column = table.getColumn(filter.value);
- if (column) {
- column.setFilterValue(
- filter.options
- .filter((option) => option.defaultSelected)
- .map((option) => option.value)
- );
- }
- return null;
- });
- initialFilterSet.current = true;
- }
- }, [filters, table]);
-
- const { t } = useTranslation();
-
return (
-
- table.getColumn(search)?.setFilterValue(event.target.value)
- }
- className="h-8 w-[150px] lg:w-[250px] dark:border-2"
- />
-
- {filters.map(
- (filter) =>
- table.getColumn(filter.value) && (
-
- )
- )}
-
- {isFiltered && (
-
- )}
+
+
{action}
diff --git a/src/components/DataTable/index.ts b/src/components/DataTable/index.ts
index abe611e..65055c6 100644
--- a/src/components/DataTable/index.ts
+++ b/src/components/DataTable/index.ts
@@ -10,3 +10,5 @@ export * from "./TableContext";
export * from "./useSWRDataTable";
export * from "./useTableState";
export * from "./DataTable";
+export * from "./DataTableSearch";
+export * from "./DataTableFilters";
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index e349db6..23b86c7 100644
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -7,7 +7,7 @@
"Clear filters": "Limpar filtros",
"Items per page": "Itens por página",
"Page {{currentPage}} of": "Página {{currentPage}} de",
- "Search": "Buscar...",
+ "Search": "Pesquise por palavra chave...",
"Reset": "Remover",
"View": "Visualizar",
"Toggle columns": "Alternar colunas",