update guidance ahead of workshop

Author: nicolethoen

ai-documentation/README.md

@@ -16,6 +16,7 @@ Essential rules and guidelines for AI coders working with PatternFly React appli
 - [**PatternFly Guidelines**](./guidelines/README.md) - Core development principles
 - [**Component Rules**](./guidelines/component-architecture.md) - Component structure requirements
 - [**Styling Rules**](./guidelines/styling-standards.md) - CSS and styling requirements
+- [**Deployment Guide**](./guidelines/deployment-guide.md) - How to deploy prototypes
 
 ### 🧩 Component Rules
 - [**Layout Rules**](./components/layout/README.md) - Page structure requirements
@@ -31,7 +32,6 @@ Essential rules and guidelines for AI coders working with PatternFly React appli
 
 ### 📖 Resources
 - [**External Links**](./resources/external-links.md) - Official documentation links
-- [**Local Files**](./resources/local-files.md) - Project-specific resources
 
 ## Usage Rules for AI Coders
 

ai-documentation/chatbot/README.md

@@ -4,8 +4,8 @@ Essential rules for PatternFly Chatbot implementation and integration patterns.
 
 ## Related Files
 
-- [**Local Resources**](../resources/local-files.md) - Reference to patternfly-chatbot.txt
-- [**Component Architecture**](../guidelines/component-architecture.md) - Component structure guidelines
+- [**Component Architecture**](../guidelines/component-architecture.md) - Chatbot component structure rules
+- [**Styling Standards**](../guidelines/styling-standards.md) - CSS and styling best practices
 
 ## Installation Rules
 
@@ -188,4 +188,9 @@ const createMessage = (content, role) => ({
 - [PatternFly Chatbot on PatternFly.org](https://www.patternfly.org/patternfly-ai/chatbot/overview)
 - [PatternFly Chatbot GitHub Repository](https://github.com/patternfly/chatbot)
 
-> For the most up-to-date documentation and code examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.
+> For the most up-to-date documentation and code examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.
+
+### Further Reading
+- **[PatternFly Chatbot Docs](https://www.patternfly.org/chatbot/overview/)**
+- **[Component API](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/components/ChipGroup)** - ChipGroup component API for tags
+- **[Accessibility Guide](https://www.patternfly.org/get-started/accessibility-guide)**

ai-documentation/components/data-display/README.md

@@ -94,21 +94,14 @@ if (!data?.length) return <EmptyState><EmptyStateHeader titleText="No data" /></
 ## Performance Rules
 
 ### Required Optimizations
-- ✅ **Use virtualization for 1000+ rows** - react-window library
 - ✅ **Use pagination for large datasets** - Better UX than virtualization
 - ✅ **Memoize table rows** - React.memo for performance
 - ✅ **Use useCallback for handlers** - Stable references
 
 ```jsx
 // ✅ Required for large datasets
-import { FixedSizeList as List } from 'react-window';
 import { Pagination } from '@patternfly/react-core';
 
-// For 1000+ items, use virtualization
-<List height={400} itemCount={data.length} itemSize={50}>
-  {Row}
-</List>
-
 // For better UX, use pagination
 <Pagination itemCount={data.length} perPage={20} page={page} />
 ```
@@ -155,127 +148,68 @@ import { Pagination } from '@patternfly/react-core';
 - **[Toolbar Component](https://www.patternfly.org/components/toolbar)** - Toolbar with filters
 - **[Dropdown Component](https://www.patternfly.org/components/menus/dropdown)** - Dropdown positioning
 
-## Data View Component Rules
+## Using the Data View Component
 
-PatternFly Data View provides a standardized way to present and interact with tabular or list-based data, following PatternFly design and accessibility guidelines.
+The `@patternfly/react-data-view` component is a powerful, opinionated tool for building consistent data-driven tables and lists. It composes standard PatternFly components like `Table`, `Toolbar`, and `Pagination` into a single, streamlined API.
 
-### Installation
-```bash
-npm install @patternfly/react-data-view
-```
+### When to Use Data View
+- ✅ **Use for standard list pages**: When you need to display a list of resources with common functionality like filtering, sorting, selection, and actions.
+- ✅ **To enforce consistency**: Use it across your application to ensure all data tables look and behave the same.
+- ❌ **Not for highly custom layouts**: If your layout deviates significantly from a standard table or list view, composing individual PatternFly components may be a better approach.
 
-### Required CSS Import
-```jsx
-import '@patternfly/react-data-view/dist/css/main.css';
-```
+## Data view documentation
+- **[Data view](https://www.patternfly.org/extensions/data-view/overview)** - Official data view documentation
+- **[Table Component](https://www.patternfly.org/extensions/data-view/table)** - Data view's table documentation and examples
+- **[Toolbar Component](https://www.patternfly.org/extensions/data-view/toolbar/)** - Data view's toolbar documentation and examples
 
-### Import Pattern
-- ✅ **Use dynamic imports** from `/dist/dynamic/` paths
-- ❌ **Don't use standard imports**
-
-```jsx
-// ✅ Correct
-import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
-```
+### Required Setup
 
-### Basic Usage Example
-```jsx
-import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
+1.  **Installation**:
+    ```bash
+    npm install @patternfly/react-data-view
+    ```
 
-<DataView
-  data={data}
-  columns={columns}
-  onRowClick={handleRowClick}
-/>
-```
+2.  **CSS Import**:
+    ```jsx
+    // Import required CSS in your application's entrypoint
+    import '@patternfly/react-data-view/dist/css/main.css';
+    ```
 
-### Component API
-- Use PatternFly naming conventions for props (e.g., `variant`, `onClick`)
-- Extend PatternFly types when possible
-- Document all props and usage examples
-- Avoid unnecessary external dependencies
+3.  **Component Import**:
+    ```jsx
+    // Use dynamic imports for better performance
+    import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
+    ```
 
-#### Example API Extension
-```ts
-// when possible, extend available PatternFly types
-export interface DataViewProps extends TableProps {
-  customLabel?: string;
-}
+### Best Practices
 
-export const DataView: React.FunctionComponent<DataViewProps> = ({ customLabel, ...props }) => ( /* ... */ );
-```
+- **Provide stable data and columns**: For performance, memoize the `data` and `columns` props passed to `DataView`, especially if they are derived from other state.
+    ```jsx
+    const columns = useMemo(() => [...], []);
+    const data = useMemo(() => [...], [sourceData]);
 
-### Directory Structure
-```
-src
-|- DataView
-   |- index.ts
-   |- DataView.tsx
-```
+    <DataView data={data} columns={columns} />
+    ```
 
-### OUIA ID Convention
-For testing, use the component name as the default OUIA ID, and for subcomponents, use `ComponentName-element-specification`.
-```ts
-ouiaId="DataView-actions-button"
-```
+- **Leverage the built-in toolbar**: `DataView` includes a `Toolbar` with filtering capabilities. Provide filter configurations instead of building your own toolbar from scratch.
 
-### Testing & Linting
-- Add unit tests to `DataView.test.tsx`
-- Add Cypress component/E2E tests to `cypress/component/DataView.cy.tsx` and `cypress/e2e/DataView.spec.cy.ts`
-- Run tests and linting:
-```bash
-npm run test
-npm run lint
-```
+- **Use the provided action resolver**: For row actions, use the `onRowAction` prop and provide an action resolver function. This ensures actions are handled consistently.
 
-### Accessibility
-- Provide proper ARIA labels and roles
-- Ensure keyboard navigation and screen reader support
-- Run accessibility tests:
-```bash
-npm run build:docs
-npm run serve:docs
-npm run test:a11y
-npm run serve:a11y
-```
-
-### Documentation Example (Markdown)
-```md
----
-section: extensions
-subsection: Data view
-id: DataView
-propComponents: ['DataView']
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
----
-
-import DataView from "@patternfly/react-data-view/dist/dynamic/DataView";
+### Real-World Example: OpenShift Console
 
-## Component usage
+A production example of PatternFly Data View usage can be found in the OpenShift Console codebase. It's an excellent resource for seeing how `DataView` is integrated with live Kubernetes data and Redux for state management.
 
-<DataView ... />
+- **[DataViewPodList.tsx on GitHub](https://github.com/openshift/console/blob/79d29bca8440a5ad82b5257bb0f37bc24384eb0e/frontend/public/components/data-view-poc/DataViewPodList.tsx)**
 
-### DataView component example label
+Key integration patterns from this example include:
+- Integrating Data View with live Kubernetes data and application state.
+- Passing dynamic data and columns to the component.
+- Handling loading, error, and empty states in a production context.
+- Using PatternFly composable components for custom row rendering and actions.
+- Connecting Data View to Redux or other state management solutions.
 
-```js file="./DataViewExample.tsx"```
-```
+> For advanced usage, review the linked file to see how Data View is composed with other PatternFly and application-specific components.
 
-### References
+> **Note:** Always consult the latest PatternFly Data View documentation and demo source code for the most up-to-date usage patterns and best practices.
 - [PatternFly React Data View GitHub](https://github.com/patternfly/react-data-view)
-- [PatternFly Data View NPM](https://www.npmjs.com/package/@patternfly/react-data-view)
-
-> **Note:** Always consult the latest PatternFly Data View documentation and demo source code for up-to-date usage patterns and best practices.
-
-### Real-World Example: OpenShift Console
-
-A production example of PatternFly Data View usage can be found in the OpenShift Console codebase:
-- [DataViewPodList.tsx on GitHub](https://github.com/openshift/console/blob/79d29bca8440a5ad82b5257bb0f37bc24384eb0e/frontend/public/components/data-view-poc/DataViewPodList.tsx)
-
-**Key integration patterns and best practices from this example:**
-- Integrates Data View with live Kubernetes data (pods) and application state.
-- Demonstrates how to pass dynamic data and columns to the Data View component.
-- Shows how to handle loading, error, and empty states in a real product context.
-- Illustrates the use of PatternFly composable components for custom row rendering and actions.
-- Provides a template for connecting Data View to Redux or other state management solutions.
-
-> For advanced usage, review the linked file to see how Data View is composed with other PatternFly and application-specific components.
+- [PatternFly Data View NPM](https://www.npmjs.com/package/@patternfly/react-data-view)

ai-documentation/components/data-display/table.md

@@ -62,22 +62,94 @@ const isPartiallySelected = selectedItems.size > 0 && selectedItems.size < data.
 />
 ```
 
+## Column and Header Management
+
+PatternFly provides powerful props for controlling column widths and making headers and columns "sticky" for better usability with wide or long tables.
+
+### Column Width Control
+Use the `width` modifier on the `<Th>` component to specify column widths as a percentage of the table's total width.
+
+- ✅ **Use `width(percentage)`**: Best for flexible, responsive layouts.
+- ❌ **Avoid fixed pixel widths**: Can break responsiveness.
+
+```jsx
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { width } from '@patternfly/react-table';
+
+<Table>
+  <Thead>
+    <Tr>
+      <Th width={40}>User ID</Th>
+      <Th width={30}>Name</Th>
+      <Th width={30}>Email</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    {/* ... */}
+  </Tbody>
+</Table>
+```
+
+### Controlling Text and Column Width
+In addition to setting explicit widths, you can control how text behaves within cells using the `modifier` prop on `<Th>` and `<Td>` components. This influences column dimensions and text overflow.
+
+Key text modifiers include:
+-   **`truncate`**: Truncates text with an ellipsis.
+-   **`wrap`**: Forces text to wrap, which is useful for long header text.
+-   **`nowrap`**: Prevents text from wrapping.
+-   **`breakWord`**: Forces long, unbreakable strings (like URLs) to break.
+-   **`fitContent`**: Shrinks the column to fit its content.
+
+For detailed usage and code examples, see the official PatternFly documentation and the example in the PatternFly React repository.
+
+- [**Controlling Text in Tables (PatternFly Docs)**](https://www.patternfly.org/components/table/controlling-text)
+- [**TableControllingText.tsx Example on GitHub**](https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/src/components/Table/examples/TableControllingText.tsx)
+
+### Sticky Headers and Columns
+For tables that scroll horizontally or vertically, you can make the header, specific columns, or the action column "sticky."
+
+-   **`isStickyHeader`**: Add this prop to the `<Table>` component to make the header row stick to the top during vertical scrolling.
+-   **`isSticky`**: Add this prop to a `<Th>` or `<Td>` component to make an entire column sticky during horizontal scrolling. This is commonly used for the first column (e.g., selection checkbox or ID), or last column (e.g. columns containing actions menus).
+
+```jsx
+// ✅ Sticky header, first column, and action column
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+
+<Table isStickyHeader>
+  <Thead>
+    <Tr>
+      <Th isSticky>ID</Th>
+      <Th>Name</Th>
+      {/* ... more columns */}
+      <Th>Actions</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    {data.map(item => (
+      <Tr key={item.id}>
+        <Td isSticky>{item.id}</Td>
+        <Td>{item.name}</Td>
+        {/* ... more cells */}
+        <Td isSticky>
+          <ActionsDropdown />
+        </Td>
+      </Tr>
+    ))}
+  </Tbody>
+</Table>
+```
+
 ## Performance Rules
-- ✅ **Use virtualization for 1000+ rows** - react-window library
+- ✅ **Use Skeleton for loading states** - Provide visual feedback
+- ✅ **Ensure responsive behavior** - Test on multiple screen sizes
 - ✅ **Use pagination for large datasets** - Better UX than virtualization
 - ✅ **Memoize table rows** - React.memo for performance
 - ✅ **Use useCallback for handlers** - Stable references
 
 ```jsx
 // ✅ Required for large datasets
-import { FixedSizeList as List } from 'react-window';
 import { Pagination } from '@patternfly/react-core';
 
-// For 1000+ items, use virtualization
-<List height={400} itemCount={data.length} itemSize={50}>
-  {Row}
-</List>
-
 // For better UX, use pagination
 <Pagination itemCount={data.length} perPage={20} page={page} />
 ```
@@ -109,11 +181,6 @@ import { Pagination } from '@patternfly/react-core';
 <Dropdown popperProps={{ appendTo: () => document.body }}>
 ```
 
-### Performance Issues
-- **1000+ rows**: Use virtualization with react-window
-- **Large datasets**: Implement pagination
-- **Slow rendering**: Memoize components with React.memo
-
 ### Selection Issues
 - **Use Set not Array**: More efficient for selection state
 - **Handle indeterminate**: For "select all" checkbox state