Hello. I was able to achieve it this way
/// Custom Menu Filter Component
/// IS TEMPORARY - TO BE REMOVED WHEN FIXED IN FUTURE RELEASE: https://abp.io/support/questions?sort=LastActivityDate-desc&creatorUserId=3a10d34c-87a0-a3f1-8e50-72cd7b2a718f&hidepinnedQuestions=True
@Component({
selector: 'app-custom-menu-filter',
imports: [CommonModule, FormsModule, LocalizationPipe],
standalone: true,
template: `
<div class="lpx-menu-filter">
<i class="bi bi-funnel menu-filter-icon"></i>
<!-- TODO: PROVIDE API -->
<input
class="menu-filter-input hidden-in-hover-trigger"
type="text"
[(ngModel)]="service.menuFilter"
[placeholder]="menuFilterText | abpLocalization"
/>
<span
(click)="service.clearFilter()"
class="menu-filter-clear hidden-in-hover-trigger"
[class.hidden]="!service.menuFilter"
>
<i class="bi bi-x clear-icon"></i>
</span>
</div>
`,
})
export class CustomMenuFilterComponent extends MenuFilterComponent {
override menuFilterText = 'LeptonX::FilterMenu' as SideMenuLayoutTranslate;
}
app.config.ts:
{
provide: CONTENT_BEFORE_ROUTES,
useValue: [CustomMenuFilterComponent],
multi: true,
},
lpx-menu-filter {
display: none !important;
}
sincelpx-menu-filter is not an ReplaceableComponent. If you can share a better wayu to achieve this I would appreciate it. Also I'll be waiting for feedback for when this issue is solved
Thanks, David Simões
Can you exemplify?
It is on angular and is page agnostic, it's on the sidebar layout
The text already exists on localization
Hello. I'm being unable to localize the filter menu's text on Filter Menu, is this a known issue or am I missing something?
The provided solution by @AI-Bot is not suficient
When ngx-datatable is in a loading state (initial load, sort, or external paging), the built-in loading/scroll indicator () is rendered outside the . As a result: The spinner/indicator appears below/above the table instead of centered inside the rows area. In some cases the “No data to display” label is still shown while loading.
Steps to Reproduce Create a simple page using ABP Extensible Table with externalPaging/externalSorting wired to an async ListService. Trigger a page change or sort so that the table enters loading state.
Observe the DOM: is appended as a sibling to (or otherwise outside the body/viewport), not inside it. Visually, the spinner sits outside the rows area;
Also when the number of results is still being calculated it display the text "NaN" instead of 0 as in previous versions
Yes. It is. I've solved it on my current implementation using datatable.recalculateColumns(). Is there a issue open on github?
The issues provided from @AI-Bot are not related to the current ticket.
After upgrading our Angular front-end to Angular 20 (using ABP Commercial 9.3.1), we started seeing a layout issue with abp-extensible-table. In Firefox everything renders correctly. In Chromium browsers (Chrome/Edge), the table headers do not align/adjust on initial render. They only fix themselves after interacting with the table (e.g. focusing, resizing, or triggering a redraw).
Steps to Reproduce Create a clean Angular 20 + ABP project. Add a simple abp-extensible-table with a few columns. Run in Chrome/Edge.
Observed Behavior On first load the header widths are misaligned or do not adjust to fit. After clicking inside the table or triggering focus, headers snap into place.
Expected Behavior Table headers and body columns should align correctly on first render in Chromium, same as in Firefox.
Current Workaround We currently use our own extended implementation of abp-extensible-table in some modules. As a temporary fix, we replaced it and forced ngx-datatable-column.canAutoResize = false. Our implementation is very similar to the ABP one, with just a few additions.
