@patternfly/react-table 6.0.0-alpha.2 → 6.0.0-alpha.21

package/src/demos/examples/TableFilterable.tsx

@@ -0,0 +1,387 @@
+import React from 'react';
+import {
+  Badge,
+  Button,
+  Bullseye,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  Label,
+  MenuToggle,
+  MenuToggleElement,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarFilter,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  Select,
+  SelectOption,
+  SearchInput,
+  ToolbarChipGroup
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
+
+export const TableFilterable: React.FunctionComponent = () => {
+  const [filters, setFilters] = React.useState<Record<string, string[]>>({ location: [], name: [], status: [] });
+  const [currentCategory, setCurrentCategory] = React.useState('Status');
+  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false);
+  const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+
+  const rowData = rows.slice(0, 10);
+
+  const onDelete = (type: string | ToolbarChipGroup, id: string) => {
+    if (type === 'Location') {
+      setFilters({
+        ...filters,
+        location: filters.location.filter((fil: string) => fil !== id)
+      });
+    } else if (type === 'Name') {
+      setFilters({
+        ...filters,
+        name: filters.name.filter((fil: string) => fil !== id)
+      });
+    } else if (type === 'Status') {
+      setFilters({
+        ...filters,
+        status: filters.status.filter((fil: string) => fil !== id)
+      });
+    } else {
+      setFilters({ location: [], name: [], status: [] });
+    }
+  };
+
+  const onCategoryToggle = () => {
+    setIsCategoryDropdownOpen(!isCategoryDropdownOpen);
+  };
+
+  const onCategorySelect = (event: React.MouseEvent<Element, MouseEvent>, value: string) => {
+    setCurrentCategory(value);
+    setIsCategoryDropdownOpen(false);
+  };
+
+  const onFilterToggle = () => {
+    setIsFilterDropdownOpen(!isFilterDropdownOpen);
+  };
+
+  const onFilterSelect = () => {
+    setIsFilterDropdownOpen(!isFilterDropdownOpen);
+  };
+
+  const onInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const onStatusSelect = (event: React.MouseEvent<Element, MouseEvent>, selection: string) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    setFilters({
+      ...filters,
+      status: checked ? [...filters.status, selection] : filters.status.filter((value) => value !== selection)
+    });
+    setIsFilterDropdownOpen(false);
+  };
+
+  const onNameInput = (event: React.KeyboardEvent) => {
+    if (event.key && event.key !== 'Enter') {
+      return;
+    }
+
+    const prevFilters = filters.name;
+    setFilters({ ...filters, name: prevFilters.includes(inputValue) ? prevFilters : [...prevFilters, inputValue] });
+  };
+
+  const onLocationSelect = (event: React.MouseEvent<Element, MouseEvent>, selection: string) => {
+    setFilters({ ...filters, location: [selection] });
+
+    setIsFilterDropdownOpen(false);
+    onFilterSelect();
+  };
+
+  const buildCategoryDropdown = () => {
+    const categoryMenuItems = [
+      <SelectOption key="cat1" value="Location">
+        Location
+      </SelectOption>,
+      <SelectOption key="cat2" value="Name">
+        Name
+      </SelectOption>,
+      <SelectOption key="cat3" value="Status">
+        Status
+      </SelectOption>
+    ];
+
+    return (
+      <ToolbarItem>
+        <Select
+          onSelect={onCategorySelect}
+          selected={currentCategory}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={onCategoryToggle}
+              isExpanded={isCategoryDropdownOpen}
+              icon={<FilterIcon />}
+              style={
+                {
+                  width: '100%',
+                  verticalAlign: 'text-bottom'
+                } as React.CSSProperties
+              }
+            >
+              {currentCategory}
+            </MenuToggle>
+          )}
+          isOpen={isCategoryDropdownOpen}
+        >
+          {categoryMenuItems}
+        </Select>
+      </ToolbarItem>
+    );
+  };
+
+  const buildFilterDropdown = () => {
+    const locationMenuItems = [
+      <SelectOption key="raleigh" value="Raleigh">
+        Raleigh
+      </SelectOption>,
+      <SelectOption key="san francisco" value="San Francisco">
+        San Francisco
+      </SelectOption>,
+      <SelectOption key="boston" value="Boston">
+        Boston
+      </SelectOption>,
+      <SelectOption key="atlanta" value="Atlanta">
+        Atlanta
+      </SelectOption>
+    ];
+
+    const statusMenuItems = [
+      <SelectOption hasCheckbox key="statusRunning" value="Running" isSelected={filters.status.includes('Running')}>
+        Running
+      </SelectOption>,
+      <SelectOption hasCheckbox key="statusStopped" value="Stopped" isSelected={filters.status.includes('Stopped')}>
+        Stopped
+      </SelectOption>,
+      <SelectOption hasCheckbox key="statusDown" value="Down" isSelected={filters.status.includes('Down')}>
+        Down
+      </SelectOption>,
+      <SelectOption hasCheckbox key="statusDegraded" value="Degraded" isSelected={filters.status.includes('Degraded')}>
+        Degraded
+      </SelectOption>,
+      <SelectOption
+        hasCheckbox
+        key="statusMaint"
+        value="Needs maintenance"
+        isSelected={filters.status.includes('Needs maintenance')}
+      >
+        Needs maintenance
+      </SelectOption>
+    ];
+
+    return (
+      <React.Fragment>
+        <ToolbarFilter
+          chips={filters.location}
+          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          categoryName="Location"
+          showToolbarItem={currentCategory === 'Location'}
+        >
+          <Select
+            aria-label="Location"
+            onSelect={onLocationSelect}
+            selected={filters.location[0]}
+            isOpen={isFilterDropdownOpen}
+            popperProps={{ minWidth: '100px' }}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onFilterToggle}
+                isExpanded={isFilterDropdownOpen}
+                style={
+                  {
+                    width: '100%',
+                    verticalAlign: 'text-bottom'
+                  } as React.CSSProperties
+                }
+              >
+                {filters.location[0] || `Any`}
+              </MenuToggle>
+            )}
+          >
+            {locationMenuItems}
+          </Select>
+        </ToolbarFilter>
+        <ToolbarFilter
+          chips={filters.name}
+          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          categoryName="Name"
+          showToolbarItem={currentCategory === 'Name'}
+        >
+          <SearchInput
+            aria-label="name filter"
+            placeholder="Filter by name..."
+            onChange={(_event, value) => onInputChange(value)}
+            value={inputValue}
+            onClear={() => {
+              onInputChange('');
+            }}
+            onSearch={onNameInput}
+          />
+        </ToolbarFilter>
+        <ToolbarFilter
+          chips={filters.status}
+          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          categoryName="Status"
+          showToolbarItem={currentCategory === 'Status'}
+        >
+          <Select
+            aria-label="Status"
+            isOpen={isFilterDropdownOpen}
+            popperProps={{ minWidth: '100px' }}
+            onSelect={onStatusSelect}
+            selected={filters.status}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onFilterToggle}
+                isExpanded={isFilterDropdownOpen}
+                style={
+                  {
+                    width: '100%',
+                    verticalAlign: 'text-bottom'
+                  } as React.CSSProperties
+                }
+              >
+                Filter by status
+                {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}
+              </MenuToggle>
+            )}
+          >
+            {statusMenuItems}
+          </Select>
+        </ToolbarFilter>
+      </React.Fragment>
+    );
+  };
+
+  const renderToolbar = () => (
+    <Toolbar
+      id="toolbar-with-chip-groups"
+      clearAllFilters={() => setFilters({ location: [], name: [], status: [] })}
+      collapseListedFiltersBreakpoint="xl"
+    >
+      <ToolbarContent>
+        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+          <ToolbarGroup
+            variant="filter-group"
+            style={
+              {
+                lineHeight: '22px',
+                alignItems: 'center'
+              } as React.CSSProperties
+            }
+          >
+            {buildCategoryDropdown()}
+            {buildFilterDropdown()}
+          </ToolbarGroup>
+        </ToolbarToggleGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const filteredRows =
+    filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0
+      ? rowData.filter(
+          (row) =>
+            (filters.name.length === 0 ||
+              filters.name.some((name) => row.name.toLowerCase().includes(name.toLowerCase()))) &&
+            (filters.location.length === 0 || filters.location.includes(row.location)) &&
+            (filters.status.length === 0 || filters.status.includes(row.status))
+        )
+      : rowData;
+
+  const emptyState = (
+    <EmptyState headingLevel="h5" titleText="Clear all filters and try again." icon={SearchIcon}>
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            variant="link"
+            onClick={() => {
+              setFilters({ location: [], name: [], status: [] });
+            }}
+          >
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+
+  const renderLabel = (labelText: string) => {
+    switch (labelText) {
+      case 'Running':
+        return <Label color="green">{labelText}</Label>;
+      case 'Stopped':
+        return <Label color="orange">{labelText}</Label>;
+      case 'Needs maintenance':
+        return <Label color="blue">{labelText}</Label>;
+      case 'Down':
+        return <Label color="red">{labelText}</Label>;
+    }
+  };
+
+  return (
+    <React.Fragment>
+      {renderToolbar()}
+      <Table aria-label="Filterable Table Demo">
+        <Thead>
+          <Tr>
+            <Th key={0}>{columns[0]}</Th>
+            <Th key={1}>{columns[1]}</Th>
+            <Th key={2}>{columns[2]}</Th>
+            <Th key={3}>{columns[3]}</Th>
+            <Th key={4}>{columns[4]}</Th>
+            <Th key={5}>{columns[5]}</Th>
+            <Th key={6}>{columns[6]}</Th>
+            <Th key={7} width={10}>
+              {columns[7]}
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {filteredRows.slice(0, 10).map((row, rowIndex) => (
+            <Tr key={rowIndex}>
+              <>
+                <Td dataLabel={columns[0]}>{row.name}</Td>
+                <Td dataLabel={columns[1]}>{row.threads}</Td>
+                <Td dataLabel={columns[2]}>{row.applications}</Td>
+                <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                <Td dataLabel={columns[5]}>{row.location}</Td>
+                <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                <Td dataLabel={columns[7]} modifier="truncate">
+                  <TableText>
+                    <a href="#">{row.url}</a>
+                  </TableText>
+                </Td>
+              </>
+            </Tr>
+          ))}
+          {filteredRows.length === 0 && (
+            <Tr>
+              <Td colSpan={8}>
+                <Bullseye>{emptyState}</Bullseye>
+              </Td>
+            </Tr>
+          )}
+        </Tbody>
+      </Table>
+    </React.Fragment>
+  );
+};

package/src/{docs/demos/table-demos/SortableResponsive.jsx → demos/examples/TableSortableResponsive.tsx}

@@ -7,18 +7,10 @@ import {
   DropdownList,
   Flex,
   FlexItem,
-  Label,
   MenuToggle,
   MenuToggleElement,
-  OverflowMenu,
-  OverflowMenuContent,
-  OverflowMenuControl,
-  OverflowMenuDropdownItem,
-  OverflowMenuGroup,
-  OverflowMenuItem,
   PageSection,
   Pagination,
-  Select,
   SelectOption,
   SelectList,
   SelectGroup,
@@ -27,7 +19,17 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  OverflowMenuDropdownItem,
+  PaginationVariant,
+  Label,
+  Select,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  PageSectionVariants
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
@@ -37,15 +39,17 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
+import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
-export const ComposableTableSortable = () => {
+type Direction = 'asc' | 'desc' | undefined;
+
+export const TableSortableResponsive: React.FunctionComponent = () => {
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
 
-  const sortRows = (r, sortIndex, sortDirection) => {
-    return [...r].sort((a, b) => {
+  const sortRows = (rows: SampleDataRow[], sortIndex: number, sortDirection: Direction) =>
+    [...rows].sort((a, b) => {
       let returnValue = 0;
       if (sortIndex === 0 || sortIndex === 7) {
         returnValue = 1;
@@ -61,7 +65,6 @@ export const ComposableTableSortable = () => {
       }
       return returnValue;
     });
-  };
 
   const [sortedData, setSortedData] = React.useState([...sortRows(rows, 0, 'asc')]);
   const [sortedRows, setSortedRows] = React.useState([...sortedData]);
@@ -71,11 +74,11 @@ export const ComposableTableSortable = () => {
   // index of the currently active column
   const [activeSortIndex, setActiveSortIndex] = React.useState(0);
   // sort direction of the currently active column
-  const [activeSortDirection, setActiveSortDirection] = React.useState('asc');
+  const [activeSortDirection, setActiveSortDirection] = React.useState<Direction>('asc');
   // sort dropdown expansion
   const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
 
-  const onSort = (event, index, direction) => {
+  const onSort = (_event: any, index: number, direction: Direction) => {
     setActiveSortIndex(index);
     setActiveSortDirection(direction);
 
@@ -88,17 +91,17 @@ export const ComposableTableSortable = () => {
     setSortedRows(sortedData.slice((page - 1) * perPage, page * perPage - 1));
   }, [sortedData, page, perPage]);
 
-  const handleSetPage = (_evt, newPage) => {
+  const handleSetPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
   };
 
-  const handlePerPageSelect = (_evt, newPerPage) => {
+  const handlePerPageSelect = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number) => {
     setPerPage(newPerPage);
   };
 
-  const renderPagination = (variant) => (
+  const renderPagination = (variant: 'top' | 'bottom' | PaginationVariant, isCompact: boolean) => (
     <Pagination
-      isCompact
+      isCompact={isCompact}
       itemCount={rows.length}
       page={page}
       perPage={perPage}
@@ -117,7 +120,7 @@ export const ComposableTableSortable = () => {
     />
   );
 
-  const renderLabel = (labelText) => {
+  const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
         return <Label color="green">{labelText}</Label>;
@@ -137,12 +140,12 @@ export const ComposableTableSortable = () => {
           <Select
             isOpen={isSortDropdownOpen}
             selected={[activeSortDirection, activeSortIndex]}
-            onOpenChange={(isOpen) => setIsSortDropdownOpen(isOpen)}
-            onSelect={(event, value) => {
+            onOpenChange={(isOpen: boolean) => setIsSortDropdownOpen(isOpen)}
+            onSelect={(event: React.MouseEvent<Element, MouseEvent>, value: string | number) => {
               if (value === 'asc' || value === 'desc') {
                 onSort(event, activeSortIndex, value);
               } else {
-                onSort(event, value, activeSortDirection !== 'none' ? activeSortDirection : 'asc');
+                onSort(event, value as number, activeSortDirection ?? 'asc');
               }
             }}
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
@@ -192,8 +195,8 @@ export const ComposableTableSortable = () => {
             <OverflowMenuControl hasAdditionalOptions>
               <Dropdown
                 onSelect={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
-                onOpenChange={(isKebabDropdownOpen) => setIsKebabDropdownOpen(isKebabDropdownOpen)}
-                toggle={(toggleRef) => (
+                onOpenChange={(isKebabDropdownOpen: boolean) => setIsKebabDropdownOpen(isKebabDropdownOpen)}
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                   <MenuToggle
                     ref={toggleRef}
                     aria-label="overflow menu"
@@ -230,7 +233,7 @@ export const ComposableTableSortable = () => {
   return (
     <React.Fragment>
       <DashboardWrapper>
-        <PageSection isWidthLimited>
+        <PageSection isWidthLimited variant={PageSectionVariants.light}>
           <TextContent>
             <Text component="h1">Table demos</Text>
             <Text component="p">

package/src/{docs/demos/table-demos/StaticBottomPagination.jsx → demos/examples/TableStaticBottomPagination.tsx}

@@ -13,29 +13,42 @@ import {
   MenuToggleElement,
   Label,
   Select,
-  SelectOption
+  SelectOption,
+  PaginationVariant
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
-export const StaticBottomPagination = () => {
+export const TableStaticBottomPagination: React.FunctionComponent = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(10);
   const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => {
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
     setPaginatedRows(rows.slice(startIdx, endIdx));
     setPage(newPage);
   };
-  handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => {
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
     setPaginatedRows(rows.slice(startIdx, endIdx));
     setPage(newPage);
     setPerPage(newPerPage);
   };
 
-  const renderPagination = (variant, isCompact) => (
+  const renderPagination = (variant: PaginationVariant | 'bottom' | 'top', isCompact: boolean) => (
     <Pagination
       isCompact={isCompact}
       itemCount={rows.length}
@@ -51,7 +64,7 @@ export const StaticBottomPagination = () => {
     />
   );
 
-  const renderLabel = (labelText) => {
+  const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
         return (
@@ -93,7 +106,7 @@ export const StaticBottomPagination = () => {
               </MenuToggle>
             )}
             isOpen={isSelectOpen}
-            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
+            onOpenChange={(isOpen: boolean) => setIsSelectOpen(isOpen)}
             onSelect={() => setIsSelectOpen(!isSelectOpen)}
           >
             {[

package/src/{docs/demos/table-demos/StickyFirstColumn.jsx → demos/examples/TableStickyFirstColumn.tsx}

@@ -1,9 +1,30 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
 import { Card, PageSection } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
 
-export const StickyFirstColumn = () => {
+type Direction = 'asc' | 'desc' | undefined;
+
+interface Fact {
+  name: string;
+  state: string;
+  detail1: string;
+  detail2: string;
+  detail3: string;
+  detail4: string;
+  detail5: string;
+  detail6: string;
+  detail7: string;
+  detail8: string;
+  detail9: string;
+  detail10: string;
+  detail11: string;
+  detail12: string;
+  detail13: string;
+  detail14: string;
+}
+
+export const TableStickyFirstColumn = () => {
   const facts = Array.from(
     {
       length: 9
@@ -45,9 +66,10 @@ export const StickyFirstColumn = () => {
     header15: 'Header 15',
     header16: 'Header 16'
   };
-  const [activeSortIndex, setActiveSortIndex] = React.useState(null);
-  const [activeSortDirection, setActiveSortDirection] = React.useState(null);
-  const getSortableRowValues = fact => {
+
+  const [activeSortIndex, setActiveSortIndex] = React.useState(-1);
+  const [activeSortDirection, setActiveSortDirection] = React.useState<Direction>('asc');
+  const getSortableRowValues = (fact: Fact) => {
     const {
       name,
       state,
@@ -86,7 +108,7 @@ export const StickyFirstColumn = () => {
     ];
   };
   let sortedFacts = facts;
-  if (activeSortIndex !== null) {
+  if (activeSortIndex > -1) {
     sortedFacts = facts.sort((a, b) => {
       const aValue = getSortableRowValues(a)[activeSortIndex];
       const bValue = getSortableRowValues(b)[activeSortIndex];
@@ -100,12 +122,12 @@ export const StickyFirstColumn = () => {
       }
     });
   }
-  const getSortParams = columnIndex => ({
+  const getSortParams = (columnIndex: number) => ({
     sortBy: {
       index: activeSortIndex,
       direction: activeSortDirection
     },
-    onSort: (_event, index, direction) => {
+    onSort: (_event: React.MouseEvent, index: number, direction: Direction) => {
       setActiveSortIndex(index);
       setActiveSortDirection(direction);
     },
@@ -148,7 +170,7 @@ export const StickyFirstColumn = () => {
                 </Tr>
               </Thead>
               <Tbody>
-                {sortedFacts.map(fact => (
+                {sortedFacts.map((fact) => (
                   <Tr key={fact.name}>
                     <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="truncate">
                       {fact.name}