diff --git a/components/src/Table/ColumnFilter.tsx b/components/src/Table/ColumnFilter.tsx
new file mode 100644
index 0000000..21e0a90
--- /dev/null
+++ b/components/src/Table/ColumnFilter.tsx
@@ -0,0 +1,172 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Box, ButtonBase, Typography, useTheme } from '@mui/material';
+import { ReactElement, useMemo, useRef, useState } from 'react';
+import { ColumnFilterDropdown } from './ColumnFilterDropDown';
+import { TableColumnConfig } from './model/table-model';
+import { FilterColumns } from './TableFilters';
+
+interface Props<TableData> extends FilterColumns {
+  id: string;
+  width?: number | 'auto';
+  filters: Array<string | number>;
+  borderRight: string;
+  column: TableColumnConfig<TableData>;
+  columnUniqueValues: Record<string, Array<string | number>>;
+  openFilterColumn?: string;
+  setOpenFilterColumn: (columnId?: string) => void;
+}
+
+export function ColumnFilter<TableData>({
+  id,
+  width,
+  filters,
+  column,
+  setColumnFilters,
+  columnFilters,
+  borderRight,
+  columnUniqueValues,
+  openFilterColumn,
+  setOpenFilterColumn,
+}: Props<TableData>): ReactElement {
+  const theme = useTheme();
+  const dropdownId = id.concat('-dropdown');
+
+  const [filterAnchorEl, setFilterAnchorEl] = useState<HTMLButtonElement | undefined>(undefined);
+  const [calculatedWidth, setCalculatedWidth] = useState<string>('0px');
+
+  const handleFilterClick = (event: React.MouseEvent<HTMLButtonElement>, columnId: string): void => {
+    event.preventDefault();
+    event.stopPropagation();
+    setFilterAnchorEl(event.target as HTMLButtonElement);
+    setOpenFilterColumn(columnId);
+  };
+
+  const handleFilterClose = (): void => {
+    setFilterAnchorEl(undefined);
+    setOpenFilterColumn(undefined);
+  };
+
+  const updateColumnFilter = (columnId: string, values: Array<string | number>): void => {
+    const newFilters = columnFilters.filter((f) => f.id !== columnId);
+    if (values.length) {
+      newFilters.push({ id: columnId, value: values });
+    }
+    setColumnFilters(newFilters);
+  };
+
+  const mainContainerRef = useRef<HTMLDivElement>(null);
+  const [mainContainerDimension, setMainContainerDimension] = useState<{ width: number; height: number }>({
+    width: 0,
+    height: 0,
+  });
+
+  const observeDimensionChanges = (htmlElements: ResizeObserverEntry[]): void => {
+    if (htmlElements?.length) {
+      const targetElement = htmlElements[0]?.target as HTMLElement;
+      const width = targetElement.offsetWidth;
+      const height = targetElement.offsetHeight;
+      setMainContainerDimension({ width, height });
+    }
+  };
+
+  /**
+   * Width is taken from the optional column.width. Therefore, it could be possibly undefined
+   * To handle this, we need the actual width of the container to adjust the width of the dropdown. They need to be perfectly aligned
+   * Also, using an observer is necessary due to the effects of the toggle view mode which changes the table dimension
+   */
+  const observer = useRef(new ResizeObserver(observeDimensionChanges));
+  if (mainContainerRef.current) {
+    observer.current.observe(mainContainerRef.current);
+  }
+
+  useMemo(() => {
+    if (width !== undefined) {
+      setCalculatedWidth(typeof width === 'number' ? `${width}px` : width);
+    } else if (mainContainerDimension) {
+      setCalculatedWidth(`${mainContainerDimension.width}px`);
+    }
+  }, [width, mainContainerDimension]);
+
+  return (
+    <Box
+      key={id}
+      data-testid={id}
+      ref={mainContainerRef}
+      sx={{
+        padding: '8px',
+        borderRight: borderRight,
+        width: width,
+        minWidth: width,
+        maxWidth: width,
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        boxSizing: 'border-box',
+        flex: typeof width === 'number' ? 'none' : '1 1 auto',
+      }}
+    >
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        noWrap
+        component="span"
+        sx={{
+          mr: 1,
+          flex: 1,
+          fontSize: '12px',
+          minWidth: '100px',
+        }}
+      >
+        {filters.length ? `${filters.length} items` : 'All'}
+      </Typography>
+
+      <ButtonBase
+        onClick={(e) => handleFilterClick(e, column.accessorKey as string)}
+        sx={{
+          border: '1px solid',
+          borderColor: 'divider',
+          backgroundColor: 'background.paper',
+          fontSize: '12px',
+          color: filters.length ? 'primary.main' : 'text.secondary',
+          px: 1,
+          py: 0.5,
+          borderRadius: 1,
+          minWidth: '20px',
+          height: '24px',
+          flexShrink: 0,
+          transition: (theme) => theme.transitions.create('all', { duration: 200 }),
+          '&:hover': {
+            backgroundColor: 'action.hover',
+          },
+        }}
+      >
+        ▼
+      </ButtonBase>
+      {filterAnchorEl && (
+        <ColumnFilterDropdown
+          anchor={filterAnchorEl}
+          open={openFilterColumn === column.accessorKey}
+          id={dropdownId}
+          width={calculatedWidth}
+          allValues={columnUniqueValues[column.accessorKey as string] || []}
+          selectedValues={filters}
+          onFilterChange={(values) => updateColumnFilter(column.accessorKey as string, values)}
+          theme={theme}
+          handleFilterClose={handleFilterClose}
+        />
+      )}
+    </Box>
+  );
+}
diff --git a/components/src/Table/ColumnFilterDropDown.tsx b/components/src/Table/ColumnFilterDropDown.tsx
new file mode 100644
index 0000000..8cf4fca
--- /dev/null
+++ b/components/src/Table/ColumnFilterDropDown.tsx
@@ -0,0 +1,150 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ReactElement } from 'react';
+import { Box, Checkbox, Divider, FormControlLabel, Theme, Typography, Popover } from '@mui/material';
+
+interface Props {
+  id: string;
+  allValues: Array<string | number>;
+  selectedValues: Array<string | number>;
+  onFilterChange: (values: Array<string | number>) => void;
+  handleFilterClose: () => void;
+  theme: Theme;
+  width: string;
+  anchor: HTMLButtonElement;
+  open: boolean;
+}
+
+export const ColumnFilterDropdown = ({
+  id,
+  allValues,
+  selectedValues,
+  onFilterChange,
+  handleFilterClose,
+  theme,
+  width,
+  open,
+  anchor,
+}: Props): ReactElement => {
+  const values = [...new Set(allValues)].filter((v) => v !== null).sort();
+
+  if (!values.length) {
+    return (
+      <Popover
+        sx={{ marginTop: '4px', marginLeft: '8px' }}
+        open={open}
+        anchorEl={anchor}
+        onClose={handleFilterClose}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+      >
+        <Box
+          data-filter-dropdown
+          data-testid={id}
+          sx={{
+            width: width,
+            padding: 10,
+            backgroundColor: theme.palette.background.paper,
+            border: `1px solid ${theme.palette.divider}`,
+            boxShadow: theme.shadows[4],
+          }}
+        >
+          <Typography sx={{ color: theme.palette.text.secondary, fontSize: 14 }}>No values found</Typography>
+        </Box>
+      </Popover>
+    );
+  }
+
+  return (
+    <Popover
+      sx={{ marginTop: '4px', marginLeft: '8px' }}
+      open={open}
+      anchorEl={anchor}
+      onClose={handleFilterClose}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+    >
+      <Box
+        data-filter-dropdown
+        data-testid={id}
+        sx={{
+          width: width,
+          padding: '10px',
+          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.divider}`,
+          boxShadow: theme.shadows[4],
+          maxHeight: 250,
+          overflowY: 'auto',
+        }}
+      >
+        <Box style={{ marginBottom: 8, fontSize: 14, fontWeight: 'bold' }}>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={selectedValues.length === values.length && values.length > 0}
+                onChange={(e) => onFilterChange(e.target.checked ? values : [])}
+                indeterminate={selectedValues.length > 0 && selectedValues.length < values.length}
+              />
+            }
+            label={<Typography sx={{ color: 'text.primary' }}>Select All ({values.length})</Typography>}
+          />
+        </Box>
+        <Divider sx={{ my: 1 }} />
+        {values.map((value, index) => (
+          <Box key={`value-${index}`} style={{ marginBottom: 4 }}>
+            <FormControlLabel
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '2px 0',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+              control={
+                <Checkbox
+                  size="small"
+                  checked={selectedValues.includes(value)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      onFilterChange([...selectedValues, value]);
+                    } else {
+                      onFilterChange(selectedValues.filter((v) => v !== value));
+                    }
+                  }}
+                />
+              }
+              label={
+                <Typography variant="body2" sx={{ color: 'text.primary', fontSize: 14 }}>
+                  {!value && value !== 0 ? '(empty)' : String(value)}
+                </Typography>
+              }
+            />
+          </Box>
+        ))}
+      </Box>
+    </Popover>
+  );
+};
diff --git a/components/src/Table/Table.tsx b/components/src/Table/Table.tsx
index 2a0d1ee..07205c7 100644
--- a/components/src/Table/Table.tsx
+++ b/components/src/Table/Table.tsx
@@ -14,6 +14,7 @@
 import { Stack, useTheme } from '@mui/material';
 import {
   ColumnDef,
+  ColumnFiltersState,
   OnChangeFn,
   Row,
   RowSelectionState,
@@ -24,11 +25,14 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { ReactElement, useCallback, useMemo } from 'react';
+import { ReactElement, useCallback, useMemo, useState } from 'react';
+
 import { TableCheckbox } from './TableCheckbox';
 import { VirtualizedTable } from './VirtualizedTable';
 import { DEFAULT_COLUMN_WIDTH, TableProps, persesColumnsToTanstackColumns } from './model/table-model';
 
+import { TableFilter } from './TableFilters';
+
 const DEFAULT_GET_ROW_ID = (data: unknown, index: number): string => {
   return `${index}`;
 };
@@ -64,6 +68,8 @@ export function Table<TableData>({
   pagination,
   onPaginationChange,
   rowSelectionVariant = 'standard',
+  filteringEnabled = false,
+  width,
   ...otherProps
 }: TableProps<TableData>): ReactElement {
   const theme = useTheme();
@@ -102,8 +108,8 @@ export function Table<TableData>({
         e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent)
           ? (e.nativeEvent as PointerEvent)
           : undefined;
-      const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;
-      handleRowSelectionEvent(table, row, isModifed);
+      const isModified = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;
+      handleRowSelectionEvent(table, row, isModified);
     },
     [handleRowSelectionEvent]
   );
@@ -174,8 +180,26 @@ export function Table<TableData>({
     return initTableColumns;
   }, [checkboxColumn, checkboxSelection, columns, hasItemActions, actionsColumn]);
 
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  const filteredData = useMemo(() => {
+    if (!filteringEnabled || !columnFilters.length) {
+      return [...data];
+    }
+
+    return data.filter((row) =>
+      columnFilters.every(({ id, value }) => {
+        const rowValue = (row as Record<string, unknown>)[id];
+        const filterValues = value as Array<string | number>;
+        // Use optional chaining and early return for clarity
+        if (!filterValues?.length) return true;
+        return filterValues.includes(rowValue as string | number);
+      })
+    );
+  }, [data, filteringEnabled, columnFilters]);
+
   const table = useReactTable({
-    data,
+    data: filteredData,
     columns: tableColumns,
     getRowId,
     getCoreRowModel: getCoreRowModel(),
@@ -207,19 +231,31 @@ export function Table<TableData>({
   );
 
   return (
-    <VirtualizedTable
-      {...otherProps}
-      density={density}
-      defaultColumnWidth={defaultColumnWidth}
-      defaultColumnHeight={defaultColumnHeight}
-      onRowClick={handleRowClick}
-      rows={table.getRowModel().rows}
-      columns={table.getAllFlatColumns()}
-      headers={table.getHeaderGroups()}
-      cellConfigs={cellConfigs}
-      pagination={pagination}
-      onPaginationChange={onPaginationChange}
-      rowCount={table.getRowCount()}
-    />
+    <>
+      {filteringEnabled && (
+        <TableFilter
+          columnFilters={columnFilters}
+          setColumnFilters={setColumnFilters}
+          columns={columns}
+          width={width}
+          data={data}
+        />
+      )}
+      <VirtualizedTable
+        {...otherProps}
+        width={width}
+        density={density}
+        defaultColumnWidth={defaultColumnWidth}
+        defaultColumnHeight={defaultColumnHeight}
+        onRowClick={handleRowClick}
+        rows={table.getRowModel().rows}
+        columns={table.getAllFlatColumns()}
+        headers={table.getHeaderGroups()}
+        cellConfigs={cellConfigs}
+        pagination={pagination}
+        onPaginationChange={onPaginationChange}
+        rowCount={table.getRowCount()}
+      />
+    </>
   );
 }
diff --git a/components/src/Table/TableFilters.tsx b/components/src/Table/TableFilters.tsx
new file mode 100644
index 0000000..e265202
--- /dev/null
+++ b/components/src/Table/TableFilters.tsx
@@ -0,0 +1,90 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Box, useTheme } from '@mui/material';
+import { ReactElement, useMemo, useState } from 'react';
+import { ColumnFiltersState } from '@tanstack/react-table';
+
+import { TableProps } from './model/table-model';
+import { ColumnFilter } from './ColumnFilter';
+
+type FilterFields = 'columns' | 'width' | 'data';
+
+export interface FilterColumns {
+  columnFilters: ColumnFiltersState;
+  setColumnFilters: (filters: ColumnFiltersState) => void;
+}
+
+export function TableFilter<TableData>({
+  columns,
+  width,
+  data,
+  columnFilters,
+  setColumnFilters,
+}: Pick<TableProps<TableData>, FilterFields> & FilterColumns): ReactElement {
+  const theme = useTheme();
+  const [openFilterColumn, setOpenFilterColumn] = useState<string | undefined>(undefined);
+
+  const getSelectedFilterValues = (columnId: string): Array<string | number> => {
+    const filter = columnFilters.find((f) => f.id === columnId);
+    return filter ? (filter.value as Array<string | number>) : [];
+  };
+
+  const columnUniqueValues = useMemo(() => {
+    const uniqueValues: Record<string, Array<string | number>> = {};
+    const keys: Set<string> = new Set();
+    data.forEach((entry) => {
+      Object.keys(entry as object).forEach((k) => keys.add(k));
+    });
+
+    keys.forEach((key) => {
+      const values = data.map((row) => (row as Record<string, unknown>)[key]).filter((i) => i !== undefined);
+      uniqueValues[key] = Array.from(new Set(values as Array<string | number>));
+    });
+
+    return uniqueValues;
+  }, [data]);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        background: theme.palette.background.default,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        width: width,
+        boxSizing: 'border-box',
+      }}
+    >
+      {columns.map((column, idx) => {
+        const filters = getSelectedFilterValues(column.accessorKey as string);
+        const borderRight = idx < columns.length - 1 ? `1px solid ${theme.palette.divider}` : 'none';
+        const columnFilterId = `filter-${idx}`;
+        return (
+          <ColumnFilter
+            key={columnFilterId}
+            id={columnFilterId}
+            width={column.width}
+            filters={filters}
+            borderRight={borderRight}
+            column={column}
+            setOpenFilterColumn={setOpenFilterColumn}
+            openFilterColumn={openFilterColumn}
+            columnFilters={columnFilters}
+            setColumnFilters={setColumnFilters}
+            columnUniqueValues={columnUniqueValues}
+          />
+        );
+      })}
+    </Box>
+  );
+}
diff --git a/components/src/Table/model/table-model.ts b/components/src/Table/model/table-model.ts
index e2aa3b5..74a4d26 100644
--- a/components/src/Table/model/table-model.ts
+++ b/components/src/Table/model/table-model.ts
@@ -178,6 +178,12 @@ export interface TableProps<TableData> {
    * Item actions should be created
    */
   hasItemActions?: boolean;
+
+  /**
+   * When `true`, enables filtering functionality in the table.
+   * Default: `false`
+   */
+  filteringEnabled?: boolean;
 }
 
 function calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {