Skip to content

FEAT(web): add showItemCount and renderTitle props to MultiList and SingleList (#1603) - #2334

Open
Talha12Shiekh wants to merge 2 commits into
appbaseio:nextfrom
Talha12Shiekh:feat/list-show-item-count-render-title
Open

FEAT(web): add showItemCount and renderTitle props to MultiList and SingleList (#1603)#2334
Talha12Shiekh wants to merge 2 commits into
appbaseio:nextfrom
Talha12Shiekh:feat/list-show-item-count-render-title

Conversation

@Talha12Shiekh

Copy link
Copy Markdown

Proposed Changes

Resolves issue #1603 by adding showItemCount and renderTitle props to MultiList and SingleList components:

  1. showItemCount (Boolean prop, default: false): When enabled, renders the count of active/filtered list items next to the title header in MultiList and SingleList.
  2. renderTitle (Function / Node prop): Provides a custom renderer function renderTitle(itemsCount, listItems) allowing developers to fully customize title rendering and display item counts.
  3. TypeScript & PropType Definitions: Updated MultiList.d.ts, SingleList.d.ts, propTypes, and defaultProps.

Linked Issues

Usage Example:

// Display item count next to title
<MultiList
  componentId="BookSensor"
  dataField="books.keyword"
  title="Books Filter"
  showItemCount={true}
/>

// Custom title renderer with item count
<MultiList
  componentId="BookSensor"
  dataField="books.keyword"
  renderTitle={(count) => <h3>Books Filter ({count})</h3>}
/>

Checklist

  • Describe the proposed changes and how it'll improve the library experience.
  • Please make sure that there are no linting errors in the code.
  • Add a demo video/gif/screenshot to explain how did you test the fix.
  • If it is a global change, try to add any side effects that it could have.
  • Create a PR to add/update the docs (if needed) at here.
  • Create a PR to add/update the storybook (if needed) at here.

Improvements to the Library Experience

  • Developer Experience & Feature Parity: Fulfills feature request Items Count next to MutliList Title #1603, allowing developers to display item counts next to component title headers or customize title rendering.

Side Effects

  • None. Default behavior remains unchanged (showItemCount defaults to false).

Testing

  • Verified Babel CommonJS and ES module compilation across MultiList.js, SingleList.js, MultiList.d.ts, and SingleList.d.ts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Items Count next to MutliList Title

1 participant