diff --git a/package/src/components/DataTable/helpers/useDataTable.js b/package/src/components/DataTable/helpers/useDataTable.js index 7d1f0f0d..0afeb43b 100644 --- a/package/src/components/DataTable/helpers/useDataTable.js +++ b/package/src/components/DataTable/helpers/useDataTable.js @@ -14,6 +14,7 @@ import { * @returns {Object} args */ export default function useDataTable({ + DefaultColumnFilter, data: simpleData, columns, onFetchData, @@ -25,6 +26,7 @@ export default function useDataTable({ const [stateData, setData] = useState([]); const [pageCount, setPageCount] = useState(0); const [globalFilter, setGlobalFilter] = useState(); + const [shouldShowAdditionalFilters, setShowAdditionalFilters] = useState(false); const tableState = useTableState({ pageCount: 0, pageSize: defaultPageSize }); const [{ sortBy, filters, pageIndex, pageSize, selectedRows }] = tableState; @@ -36,6 +38,14 @@ export default function useDataTable({ data = simpleData; } + const defaultColumn = React.useMemo( + () => ({ + // Let's set up our default Filter UI + Filter: DefaultColumnFilter || (() => null) + }), + [DefaultColumnFilter] + ); + const columnsWithCheckboxes = useMemo(() => { if (isSelectable) { const hasCheckboxColumn = Boolean(columns.find(({ id }) => id === "selection")); @@ -127,6 +137,7 @@ export default function useDataTable({ { columns: columnsWithCheckboxes, data, + defaultColumn, getRowID: (row, index) => `${pageIndex}.${index}`, state: tableState, manualFilters: isServerControlled, @@ -143,6 +154,8 @@ export default function useDataTable({ return { ...dataTableProps, isSelectable, + setShowAdditionalFilters, + shouldShowAdditionalFilters, onGlobalFilterChange: handleGlobalFilterChange }; }