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",