import { P as e } from "../../../../packageName-CJwD6mUt.js";
const l = `
import { useMemo, useState } from 'react';
import { DataTable, FilterHandler, FilterState, FilterPreset, FilterConditionOperator } from '${e}';

const App = () => {
  const data = useMemo(() => getMockData(10), []);
  const [presets, setPresets] = useState<FilterPreset<Person>[]>([{ label: 'All', value: {} }]);

  // State for tracking filters
  const [filters, setFilter] = useState<Partial<FilterState<Person>>>();

  // Controls which filter columns are shown in the toolbar.
  // Only columns listed here will render a filter input.
  // Providing this state together with onSelectedFilterableColumnKeysChange
  // enables the "Weitere Filter" button.
  const [selectedFilterableColumnKeys, setSelectedFilterableColumnKeys] = useState<(keyof Person)[]>(['name']);

  const handleFilterChange = (newFilter?: Partial<FilterState<Person>>) => {
    setFilter(newFilter);
  };

  const filteredData = useMemo(() => {
    // Handle filtering logic by yourself - apply the filters to the data

  }, [data, filters]);

  const filterInputConfig: FilterHandler<Person> = {
    enabled: true,
    filterableColumns: [
      {
        columnKey: 'name',
        options: [
          { label: 'John', value: 'John' },
          { label: 'Jane', value: 'Jane' },
          { label: 'Bob', value: 'Bob' },
        ],
        mode: 'multi',
      },
      {
        columnKey: 'age',
        mode: 'single',
      },
      {
        columnKey: 'status',
        mode: 'single',
      },
    ],
    // Pass selectedFilterableColumnKeys + onSelectedFilterableColumnKeysChange
    // to enable the "Weitere Filter" button. Only the selected columns render
    // a filter input; deselecting a column also clears its active condition.
    selectedFilterableColumnKeys,
    onSelectedFilterableColumnKeysChange: setSelectedFilterableColumnKeys,
    onChange: handleFilterChange,
    hasFilterSaving: true,
    presets,
    onSavePreset: setPresets,
  };

  return (
    <DataTable
      toolbar={{
        title: 'Table with Filters Input',
        subtitle: 'This is a table with filters input',
      }}
      tableHeight={500}
      dataSource={filteredData}
      columns={columns}
      filter={filterInputConfig}
    />
  );
};  

export default App;
`;
export {
  l as default
};
//# sourceMappingURL=filterSource.js.map
