@patternfly/react-table 6.0.0-alpha.1 → 6.0.0-alpha.100

package/src/demos/Table.md

@@ -0,0 +1,181 @@
+---
+id: Table
+section: components
+---
+
+import {
+Checkbox,
+Content,
+Label,
+PageSection,
+ToolbarExpandIconWrapper,
+ToolbarContent,
+Toolbar,
+ToolbarItem,
+SearchInput,
+Masthead,
+MastheadToggle,
+MastheadBrand,
+MastheadContent,
+SkipToContent,
+Breadcrumb,
+BreadcrumbItem,
+Page,
+PageSectionVariants,
+Divider,
+Avatar,
+Brand,
+Button,
+ButtonVariant,
+Dropdown,
+DropdownGroup,
+DropdownItem,
+DropdownList,
+MastheadLogo,
+MenuToggle,
+ToolbarGroup,
+PageToggleButton,
+Nav,
+NavItem,
+NavList,
+PageSidebar,
+PageSidebarBody,
+} from '@patternfly/react-core';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
+import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+## Demos
+
+### Bulk select
+
+```js isFullscreen file="./examples/TableBulkSelect.tsx"
+
+```
+
+### Expand/collapse all
+
+```js isFullscreen file="./examples/TableExpandCollapseAll.tsx"
+
+```
+
+### Compact
+
+```js isFullscreen file="./examples/TableCompact.tsx"
+
+```
+
+### Compound expansion
+
+```js isFullscreen file="./examples/TableCompoundExpansion.tsx"
+
+```
+
+### Column management
+
+```js isFullscreen file="./examples/TableColumnManagement.tsx"
+
+```
+
+### Column management with draggable
+
+```js isFullscreen file="./examples/TableColumnManagementWithDraggable.tsx"
+
+```
+
+### Filterable
+
+```js isFullscreen file="./examples/TableFilterable.tsx"
+
+```
+
+### Sortable - responsive
+
+```js isFullscreen file="./examples/TableSortableResponsive.tsx"
+
+```
+
+### Automatic pagination
+
+The below example illustrates the `isLastFullPageShown` prop, which makes the following changes when the user sets the number of items to display per page to an amount that exceeds the remaining amount of data:
+
+- The component automatically changes the page back to the last full page of results, rather than defaulting to the final page of results.
+
+To demonstrate this, navigate to the last page of data below using the `>>` navigation arrows, then use the dropdown selector to change the view to 5 per page.
+
+- The default behavior would show the last page of results, which would only contain the last two rows (rows 11 - 12).
+- The `isLastFullPageShown` prop navigates you back to the previous page which does contain a full page of 5 rows (rows 6 - 10).
+
+```js isFullscreen file="./examples/TableAutomaticPagination.tsx"
+
+```
+
+### Static bottom pagination on mobile
+
+```ts isFullscreen file="./examples/TableStaticBottomPagination.tsx"
+
+```
+
+### Sticky header
+
+```js isFullscreen file="./examples/TableStickyHeader.tsx"
+
+```
+
+### Sticky first column
+
+```js isFullscreen file="./examples/TableStickyFirstColumn.tsx"
+
+```
+
+### Sticky columns and header with toolbar
+
+A toolbar may be added above a sticky table either inside or outside the `OuterScrollContainer`.
+
+```js isFullscreen file="../components/Table/examples/TableStickyColumnsAndHeader.tsx"
+
+```
+
+## Empty states
+
+These examples demonstrate the use of an [Empty State component](/components/empty-state) inside of a [Table](/components/table). Empty states are useful in a table when a filter returns no results, while data is loading, or when any type of error or exception condition occurs.
+
+### Empty
+
+```js isFullscreen file="./examples/TableEmptyStateDefault.tsx"
+
+```
+
+### Loading
+
+```js isFullscreen file="./examples/TableEmptyStateLoading.tsx"
+
+```
+
+### Error
+
+```js isFullscreen file="./examples/TableEmptyStateError.tsx"
+
+```

package/src/demos/assets/avatarImg.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F0F0F0;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D2D2D2;}
+	.st2{fill:#B8BBBE;}
+	.st3{fill:#D2D2D2;}
+</style>
+<rect class="st0" width="36" height="36"/>
+<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
+<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
+<path class="st3" d="M10.1,36l0.1-3.2c0.2-2.1,1.1-3.1,3.1-3.5l0,6.7h9.4l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2h4.7
+	c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7c-1.2,0.4-2.4,1.2-3.4,2.6
+	C6.7,27,5.8,32.2,5.4,36H10.1z"/>
+<path class="st2" d="M25.9,36l-0.1-3.2c-0.2-2.1-1.1-3.1-3.1-3.5l0,6.7H25.9z"/>
+</svg>

package/src/demos/assets/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/src/demos/assets/pf-logo.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>

package/src/demos/examples/TableAutomaticPagination.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+export const TableAutomaticPagination: React.FunctionComponent = () => {
+  const columns = {
+    firstColumn: 'First column',
+    secondColumn: 'Second column',
+    thirdColumn: 'Third column'
+  };
+
+  const defaultRows = [
+    { firstColumn: 'Row 1 column 1', secondColumn: 'Row 1 column 2', thirdColumn: 'Row 1 column 3' },
+    { firstColumn: 'Row 2 column 1', secondColumn: 'Row 2 column 2', thirdColumn: 'Row 2 column 3' },
+    { firstColumn: 'Row 3 column 1', secondColumn: 'Row 3 column 2', thirdColumn: 'Row 3 column 3' },
+    { firstColumn: 'Row 4 column 1', secondColumn: 'Row 4 column 2', thirdColumn: 'Row 4 column 3' },
+    { firstColumn: 'Row 5 column 1', secondColumn: 'Row 5 column 2', thirdColumn: 'Row 5 column 3' },
+    { firstColumn: 'Row 6 column 1', secondColumn: 'Row 6 column 2', thirdColumn: 'Row 6 column 3' },
+    { firstColumn: 'Row 7 column 1', secondColumn: 'Row 7 column 2', thirdColumn: 'Row 7 column 3' },
+    { firstColumn: 'Row 8 column 1', secondColumn: 'Row 8 column 2', thirdColumn: 'Row 8 column 3' },
+    { firstColumn: 'Row 9 column 1', secondColumn: 'Row 9 column 2', thirdColumn: 'Row 9 column 3' },
+    { firstColumn: 'Row 10 column 1', secondColumn: 'Row 10 column 2', thirdColumn: 'Row 10 column 3' },
+    { firstColumn: 'Row 11 column 1', secondColumn: 'Row 11 column 2', thirdColumn: 'Row 11 column 3' },
+    { firstColumn: 'Row 12 column 1', secondColumn: 'Row 12 column 2', thirdColumn: 'Row 12 column 3' }
+  ];
+  const defaultPerPage = 10;
+
+  const [perPage, setPerPage] = React.useState(defaultPerPage);
+  const [page, setPage] = React.useState(1);
+  const [rows, setRows] = React.useState(defaultRows.slice(0, defaultPerPage));
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPage(newPage);
+    setRows(defaultRows.slice(startIdx, endIdx));
+  };
+
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+    setRows(defaultRows.slice(startIdx, endIdx));
+  };
+
+  const renderPagination = (variant = 'top') => (
+    <Pagination
+      isCompact
+      itemCount={defaultRows.length}
+      page={page}
+      perPage={perPage}
+      isLastFullPageShown
+      onSetPage={handleSetPage}
+      onPerPageSelect={handlePerPageSelect}
+      perPageOptions={[
+        { title: '3', value: 3 },
+        { title: '5', value: 5 },
+        { title: '12', value: 12 },
+        { title: '20', value: 20 }
+      ]}
+      titles={{
+        paginationAriaLabel: `${variant} pagination`
+      }}
+    />
+  );
+
+  return (
+    <React.Fragment>
+      {renderPagination()}
+      <Table aria-label="Automated Pagination Table Demo">
+        <Thead>
+          <Tr>
+            <Th>{columns.firstColumn}</Th>
+            <Th>{columns.secondColumn}</Th>
+            <Th>{columns.thirdColumn}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {rows.map((row, rowIndex) => (
+            <Tr key={rowIndex}>
+              <>
+                <Td dataLabel={columns.firstColumn}>{row.firstColumn}</Td>
+                <Td dataLabel={columns.secondColumn}>{row.secondColumn}</Td>
+                <Td dataLabel={columns.thirdColumn}>{row.thirdColumn}</Td>
+              </>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </React.Fragment>
+  );
+};

package/src/{docs/demos/table-demos/BulkSelect.jsx → demos/examples/TableBulkSelect.tsx}

@@ -6,44 +6,63 @@ import {
   DropdownItem,
   MenuToggle,
   MenuToggleCheckbox,
+  MenuToggleElement,
   PageSection,
   Pagination,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  PaginationVariant
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-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';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
-export const BulkSelectTableDemo = () => {
+export const TableBulkSelect: React.FunctionComponent = () => {
   const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);
   const [bulkSelection, setBulkSelection] = React.useState('');
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(10);
   const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const [selectedRows, setSelectedRows] = React.useState([]);
-  const handleSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => {
-    setPaginatedRows(rows.slice(startIdx, endIdx));
+  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPaginatedRows(rows?.slice(startIdx, endIdx));
     setPage(newPage);
   };
-  const 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 setRowSelected = (row, isSelecting = true) =>
+  const setRowSelected = (row: SampleDataRow, isSelecting: boolean) =>
     setSelectedRows((prevSelected) => {
       const otherSelectedRows = prevSelected.filter((r) => r !== row.name);
       return isSelecting ? [...otherSelectedRows, row.name] : otherSelectedRows;
     });
-  const selectAllRows = (isSelecting = true) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []);
-  const selectPageRows = (isSelecting = true) => setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []);
-  const isRowSelected = (row) => selectedRows.includes(row.name);
 
-  const buildPagination = (variant, isCompact) => (
+  const selectAllRows = (isSelecting: boolean) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []);
+
+  const selectPageRows = (isSelecting: boolean) => setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []);
+
+  const isRowSelected = (row: any) => selectedRows.includes(row.name);
+
+  const buildPagination = (variant: 'bottom' | 'top' | PaginationVariant, isCompact: boolean) => (
     <Pagination
       isCompact={isCompact}
       itemCount={rows.length}
@@ -72,10 +91,11 @@ export const BulkSelectTableDemo = () => {
         <DropdownItem value="all">Select all ({rows.length} items)</DropdownItem>
       </>
     );
+
     return (
       <Dropdown
         role="menu"
-        onSelect={(_ev, value) => {
+        onSelect={(_event: React.MouseEvent<Element, MouseEvent>, value: string) => {
           if (value === 'all') {
             selectAllRows(bulkSelection !== 'all');
           } else if (value === 'page') {
@@ -83,11 +103,11 @@ export const BulkSelectTableDemo = () => {
           } else {
             setSelectedRows([]);
           }
-          setBulkSelection(value);
+          setBulkSelection(value as string);
         }}
         isOpen={isBulkSelectDropdownOpen}
-        onOpenChange={(isOpen) => setIsBulkSelectDropdownOpen(isOpen)}
-        toggle={(toggleRef) => (
+        onOpenChange={(isOpen: boolean) => setIsBulkSelectDropdownOpen(isOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
           <MenuToggle
             ref={toggleRef}
             isExpanded={isBulkSelectDropdownOpen}
@@ -122,7 +142,7 @@ export const BulkSelectTableDemo = () => {
         <ToolbarGroup>
           <ToolbarItem variant="bulk-select">{buildBulkSelectDropdown()}</ToolbarItem>
         </ToolbarGroup>
-        <ToolbarItem variant="pagination">{buildPagination('top')}</ToolbarItem>
+        <ToolbarItem variant="pagination">{buildPagination('top', false)}</ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
@@ -134,7 +154,7 @@ export const BulkSelectTableDemo = () => {
         <Table aria-label="Selectable table">
           <Thead>
             <Tr>
-              <Th />
+              <Th screenReaderText="Row select" />
               <Th key={0}>{columns[0]}</Th>
               <Th key={1}>{columns[1]}</Th>
               <Th key={2}>{columns[2]}</Th>
@@ -147,7 +167,8 @@ export const BulkSelectTableDemo = () => {
                 <Td
                   select={{
                     rowIndex,
-                    onSelect: (_event, isSelecting) => setRowSelected(row, isSelecting),
+                    onSelect: (_event: React.FormEvent<HTMLInputElement>, isSelecting: boolean) =>
+                      setRowSelected(row, isSelecting),
                     isSelected: isRowSelected(row)
                   }}
                 />
@@ -159,7 +180,7 @@ export const BulkSelectTableDemo = () => {
             ))}
           </Tbody>
         </Table>
-        {buildPagination('bottom')}
+        {buildPagination('bottom', true)}
       </PageSection>
     </DashboardWrapper>
   );