Skip to content

Table caption support #1057

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akankal-eightfold wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Table caption support #1057

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/components/Table/Internal/OcTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,9 @@ function OcTable<RecordType extends DefaultRecordType>(
const {
alternateRowColor,
bordered,
caption,
captionClassName,
captionSide = 'top',
classNames,
rowClassName,
style,
Expand Down Expand Up @@ -609,6 +612,14 @@ function OcTable<RecordType extends DefaultRecordType>(
tableLayout: mergedTableLayout,
}}
>
{caption && (
<caption
className={mergeClasses([styles.tableCaption, captionClassName])}
style={{ captionSide }}
>
{caption}
</caption>
)}
{bodyColGroup}
{bodyTable}
{!fixFooter && summaryNode && (
Expand Down Expand Up @@ -718,6 +729,14 @@ function OcTable<RecordType extends DefaultRecordType>(
tableLayout: mergedTableLayout,
}}
>
{caption && (
<caption
className={mergeClasses([styles.tableCaption, captionClassName])}
style={{ captionSide }}
>
{caption}
</caption>
)}
{bodyColGroup}
{showHeader !== false && (
<Header {...headerProps} {...columnContext} />
Expand Down
14 changes: 14 additions & 0 deletions src/components/Table/Internal/OcTable.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,6 +494,20 @@ export interface OcTableProps<RecordType = unknown> {
* Show all Table borders.
*/
bordered?: boolean;
/**
* The Table caption content.
* Renders a native HTML caption element for accessibility.
*/
caption?: React.ReactNode;
/**
* The custom class name of the Table caption.
*/
captionClassName?: string;
/**
* The Table caption position.
* @default 'top'
*/
captionSide?: 'top' | 'bottom';
Comment on lines +506 to +510
Copy link
Copy Markdown
Contributor

@factory-droid factory-droid Bot Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 Use an enum for the caption positioning options instead of a union type. Caption positioning represents component variants and should follow the established pattern.

export enum TableCaptionSide {
  Top = 'top',
  Bottom = 'bottom'
}

Then update the interface:

/**
 * The Table caption position.
 * @default TableCaptionSide.Top
 */
captionSide?: TableCaptionSide;

Also update the default parameter in OcTable.tsx to use TableCaptionSide.Top.

Footnotes

  1. This suggestion is based on your review guideline: "Use interfaces for component props. Prefer enums for component variants, modes, and sizes. Export all types and interfaces. Use descriptive names for types and interfaces. Use proper JSDoc comments to document types. Follow TypeScript best practices for unions, intersections, and optional properties. Use generics to create flexible, reusable types. Avoid circular type dependencies. Use type aliases for complex union or intersection types. Ensure consistent naming conventions across type definitions.
    " ↩

/**
* The Table custom class names.
*/
Expand Down
4 changes: 4 additions & 0 deletions src/components/Table/Internal/octable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,6 +348,10 @@
border-top-right-radius: $table-border-radius;
}

&-caption {
visibility: hidden;
}
Comment on lines +351 to +353
Copy link
Copy Markdown
Contributor

@factory-droid factory-droid Bot Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 Remove the visibility: hidden property from the caption styling. Table captions should be visible by default when provided, especially since this feature is being added for accessibility purposes. The current CSS rule would hide all captions, defeating the purpose of the caption functionality.

Committable suggestion

Please carefully review the code before committing.

Suggested change
&-caption {
visibility: hidden;
}
&-caption {
}

Footnotes

  1. This suggestion is based on your review guideline: "Catch and correct any obvious bugs. Ensure code is clean, maintainable, and follows project conventions. Check for security vulnerabilities and performance issues. Avoid circular dependencies.
    " ↩


&-footer {
background: var(--table-footer-background-color);
color: var(--table-footer-foreground-color);
Expand Down
18 changes: 18 additions & 0 deletions src/components/Table/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1441,6 +1441,9 @@ export const Virtual_List: FC = () => {
);
};

export const Caption = Table_Base_Story.bind({});
export const Caption_Bottom = Table_Base_Story.bind({});

// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
// this line ensures they are exported in the desired order.
// See https://www.npmjs.com/package/babel-plugin-named-exports-order
Expand All @@ -1460,6 +1463,8 @@ export const __namedExportsOrder = [
'Empty',
'Header_Grouping',
'Header_And_Footer',
'Caption',
'Caption_Bottom',
'Fixed_Header',
'Fixed_Columns',
'Fixed_Columns_and_Header',
Expand Down Expand Up @@ -1825,3 +1830,16 @@ Page_Sizes.args = {
total: 1000,
},
};

Caption.args = {
...tableArgs,
bordered: false,
caption: 'Sales Team Members - Q4 2024',
};

Caption_Bottom.args = {
...tableArgs,
bordered: false,
caption: 'Sales Team Members - Q4 2024',
captionSide: 'bottom',
};