@cahyo-dimas/freeday 1.32.1 → 1.34.0

package/adapters/react/components/FdyCfl.tsx

@@ -29,6 +29,20 @@ export interface FdyCflProps<Row extends Record<string, unknown>> {
   rowKey: (row: Row) => string;
   /** Advisory only — the caller's `fetchPage` owns paging; kept for API documentation. */
   pageSize?: number;
+  /** The dialog's heading. Default 'Choose data', matching the Blazor adapter's `Title`. */
+  title?: string;
+  /** Placeholder AND accessible name of the dialog's search box. Default 'Search…'. */
+  searchPlaceholder?: string;
+  /** Default 'Loading…'. */
+  loadingText?: string;
+  /** Default 'No results.'. */
+  emptyText?: string;
+  /** Default 'Try again'. */
+  retryText?: string;
+  /** Default 'Load more'. */
+  moreText?: string;
+  /** aria-label for the dialog's close button. Default 'Close'. */
+  closeLabel?: string;
   placeholder?: string;
   disabled?: boolean;
   /** Locked/view mode: shows the picked value (focusable, copyable), but the search dialog can't be opened. Unlike `disabled`, it keeps tab order and isn't greyed. */
@@ -298,8 +312,8 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
       <dialog ref={dialogRef} className="fdy-modal fdy-modal--cfl" aria-labelledby={titleId} onClose={onClose} onKeyDown={onKeydown}>
         <div className="fdy-modal__header">
-          <h3 id={titleId} className="fdy-modal__title">Pilih data</h3>
-          <button className="fdy-modal__close" type="button" aria-label="Tutup" onClick={closeDialog}>&times;</button>
+          <h3 id={titleId} className="fdy-modal__title">{props.title ?? 'Choose data'}</h3>
+          <button className="fdy-modal__close" type="button" aria-label={props.closeLabel ?? 'Close'} onClick={closeDialog}>&times;</button>
         </div>
 
         <div className="fdy-modal__body">
@@ -316,8 +330,8 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
                 className="fdy-input"
                 type="search"
                 value={query}
-                placeholder="Cari…"
-                aria-label="Cari data"
+                placeholder={props.searchPlaceholder ?? 'Search…'}
+                aria-label={props.searchPlaceholder ?? 'Search…'}
                 aria-controls={controlsId}
                 aria-activedescendant={activeDescendant}
                 onChange={onSearchInput}
@@ -327,17 +341,17 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
           <div className="fdy-cfl__results">
             {isInitialLoading ? (
-              <p className="fdy-cfl__empty" role="status">Memuat…</p>
+              <p className="fdy-cfl__empty" role="status">{props.loadingText ?? 'Loading…'}</p>
             ) : isBlockingError ? (
               <div className="fdy-cfl__empty" role="alert">
                 <p style={{ margin: '0 0 var(--space-3)' }}>{error?.message}</p>
-                <button className="fdy-btn fdy-btn--sm" type="button" onClick={retry}>Coba lagi</button>
+                <button className="fdy-btn fdy-btn--sm" type="button" onClick={retry}>{props.retryText ?? 'Try again'}</button>
               </div>
             ) : isEmpty ? (
-              <p className="fdy-cfl__empty">Tidak ada hasil.</p>
+              <p className="fdy-cfl__empty">{props.emptyText ?? 'No results.'}</p>
             ) : (
               <>
-                <table id={resultsId} className="fdy-table" aria-label="Hasil pencarian">
+                <table id={resultsId} className="fdy-table" aria-label="Search results">
                   <thead>
                     <tr>
                       {props.columns.map((col: CflColumn<Row>): JSX.Element => (
@@ -371,7 +385,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
                 ) : hasMore ? (
                   <div style={{ padding: 'var(--space-3) var(--space-4)', textAlign: 'center' }}>
                     <button className="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button" disabled={loading} onClick={loadMore}>
-                      {loading ? 'Memuat…' : 'Muat lebih banyak'}
+                      {loading ? (props.loadingText ?? 'Loading…') : (props.moreText ?? 'Load more')}
                     </button>
                   </div>
                 ) : null}
@@ -381,9 +395,9 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
         </div>
 
         <div className="fdy-modal__footer">
-          <span className="fdy-cfl__count">Klik baris untuk memilih</span>
+          <span className="fdy-cfl__count">Click a row to choose it</span>
           <div className="fdy-cfl__actions">
-            <button className="fdy-btn fdy-btn--ghost" type="button" onClick={closeDialog}>Tutup</button>
+            <button className="fdy-btn fdy-btn--ghost" type="button" onClick={closeDialog}>{props.closeLabel ?? 'Close'}</button>
           </div>
         </div>
       </dialog>

package/adapters/react/components/FdyTable.tsx

@@ -7,7 +7,6 @@ import {
   filterRows,
   sortRows,
   paginate,
-  pageWindow,
 } from '../../core/table-model.js';
 import type {
   FdyTableColumn,
@@ -17,6 +16,7 @@ import type {
   FdyPageState,
 } from '../../core/table-model.js';
 import { FdyTableFilter } from './FdyTableFilter';
+import { FdyTableFooter } from './FdyTableFooter';
 
 // A controlled React data table over freeday's `.fdy-datatable` / `.fdy-table*` / `.fdy-filter*` /
 // `.fdy-pagination__*` classes. React port of adapters/vue/components/FdyTable.vue. Unlike the
@@ -51,6 +51,24 @@ export interface FdyTableProps<Row extends object> {
    * card list from `onProcess` can render one pager for both breakpoints and point it here.
    * Omit for the internal index (unchanged default).
    */
+  /** Withhold the table's own footer (pager + range) so the screen can render one. Server mode had
+   *  no way to do this: the app owns the page there ANYWAY, and was still handed a second control —
+   *  a responsive list that shows a table at one breakpoint and cards at another ended up with the
+   *  kit's pager stacked under its own. Client mode's counterpart is `pageIndex`. Default true. */
+  pager?: boolean;
+  /**
+   * Offer a rows-per-page control in the footer, beside the range and the pager. Omit for none
+   * (unchanged default). Every back office has one, and a table that renders two thirds of its own
+   * footer forces the app to rebuild all three to add the last (#008).
+   *
+   * Server mode reports the pick through `onPageChange` — same callback as a page click, with a new
+   * `size`. Client mode keeps it internally and also calls `onPageSizeChange`, so the control works
+   * with nothing wired and can still be persisted.
+   */
+  pageSizes?: readonly number[];
+  /** Client mode with `pageSizes`: the reader picked a new rows-per-page. The table has already
+   *  applied it — this is for a caller that wants to persist the choice. */
+  onPageSizeChange?: (size: number) => void;
   pageIndex?: number;
   /** Client mode with `pageIndex` provided: the table asks for a new 0-based index (pager click, a
    *  reset to 0 after sort/filter, or a clamp when filtering shrank the set). */
@@ -86,6 +104,16 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
   const [internalSort, setInternalSort] = useState<FdySortState | null>(null);
   const [internalFilters, setInternalFilters] = useState<FdyFilterMap>({});
   const [internalPageIndex, setInternalPageIndex] = useState<number>(0);
+  /* Client-mode rows-per-page. `pageSize` is a plain prop with no callback, so a footer control that
+   * only reported would do nothing in the app that wired nothing — the table applies the pick itself
+   * and reports it. `prevPageSize` is React's adjust-state-during-render idiom: an explicit change to
+   * the prop wins back, because the parent said something newer. */
+  const [internalPageSize, setInternalPageSize] = useState<number | null>(null);
+  const [prevPageSize, setPrevPageSize] = useState<number | undefined>(props.pageSize);
+  if (prevPageSize !== props.pageSize) {
+    setPrevPageSize(props.pageSize);
+    setInternalPageSize(null);
+  }
 
   const effectiveSort: FdySortState | null = sortControlled ? (props.sort ?? null) : internalSort;
   const effectiveFilters: FdyFilterMap = filtersControlled ? (props.filters ?? {}) : internalFilters;
@@ -118,19 +146,21 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
     } else setInternalPageIndex(index0);
   }
 
+  const pageSizeEff: number = serverPaged
+    ? (props.page as FdyPageState).size
+    : (internalPageSize ?? props.pageSize ?? 0);
+
   const displayRows: Row[] = useMemo(() => {
     if (serverPaged) return props.rows.slice();
-    if (props.pageSize && props.pageSize > 0) return paginate(filteredSorted, clientPageIndex, props.pageSize);
+    if (pageSizeEff > 0) return paginate(filteredSorted, clientPageIndex, pageSizeEff);
     return filteredSorted;
-  }, [serverPaged, props.rows, props.pageSize, filteredSorted, clientPageIndex]);
+  }, [serverPaged, props.rows, pageSizeEff, filteredSorted, clientPageIndex]);
 
-  const pageSizeEff: number = serverPaged ? (props.page as FdyPageState).size : (props.pageSize ?? 0);
   const currentPage1: number = (serverPaged ? (props.page as FdyPageState).index : clientPageIndex) + 1;
   const totalPages: number = pageSizeEff > 0 ? Math.max(1, Math.ceil(totalCount / pageSizeEff)) : 1;
-  const hasPager: boolean = pageSizeEff > 0 && totalPages > 1;
-  const pages: Array<number | 'ellipsis'> = pageWindow(currentPage1, totalPages);
-  const rangeFrom: number = totalCount === 0 ? 0 : (currentPage1 - 1) * pageSizeEff + 1;
-  const rangeTo: number = totalCount === 0 ? 0 : rangeFrom - 1 + displayRows.length;
+  /* What the footer needs, in both modes: the range, the pager and the size control are all derived
+   * from these three numbers, so the table hands them over rather than restating them. */
+  const footerPage: FdyPageState = { index: currentPage1 - 1, size: pageSizeEff, total: totalCount };
 
   // Client mode: keep the page in range when a filter shrinks the row set.
   useEffect((): void => {
@@ -182,6 +212,20 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
     }
   }
 
+  /* One callback carries both intents, so which one it was is read off `size`. */
+  function onFooterPage(next: FdyPageState): void {
+    if (next.size !== pageSizeEff) {
+      if (serverPaged) props.onPageChange?.(next);
+      else {
+        setInternalPageSize(next.size);
+        props.onPageSizeChange?.(next.size);
+        setClientPage(next.index);
+      }
+      return;
+    }
+    goTo(next.index + 1);
+  }
+
   function cellClass(col: FdyTableColumn<Row>): string | undefined {
     return col.mono === true ? 'fdy-mono' : undefined;
   }
@@ -281,31 +325,8 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
         </table>
       </div>
 
-      {hasPager && (
-        <div className="fdy-table-footer">
-          <span className="fdy-table-footer__info">Showing {rangeFrom}–{rangeTo} of {totalCount}</span>
-          <nav aria-label="Pagination">
-            <ul className="fdy-pagination__list">
-              <li>
-                <button type="button" className="fdy-pagination__link" aria-label="Previous page" disabled={currentPage1 === 1} onClick={(): void => goTo(currentPage1 - 1)}>‹</button>
-              </li>
-              {pages.map((p: number | 'ellipsis', i: number): JSX.Element => (
-                <li key={typeof p === 'number' ? `p-${p}` : `gap-${i}`}>
-                  {p === 'ellipsis' ? (
-                    <span className="fdy-pagination__ellipsis">…</span>
-                  ) : p === currentPage1 ? (
-                    <span className="fdy-pagination__link" aria-current="page">{p}</span>
-                  ) : (
-                    <button type="button" className="fdy-pagination__link" aria-label={`Go to page ${p}`} onClick={(): void => goTo(p)}>{p}</button>
-                  )}
-                </li>
-              ))}
-              <li>
-                <button type="button" className="fdy-pagination__link" aria-label="Next page" disabled={currentPage1 === totalPages} onClick={(): void => goTo(currentPage1 + 1)}>›</button>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      {props.pager !== false && (
+        <FdyTableFooter page={footerPage} pageSizes={props.pageSizes} onPageChange={onFooterPage} />
       )}
     </div>
   );

package/adapters/react/components/FdyTableFooter.tsx

@@ -0,0 +1,102 @@
+import type { JSX } from 'react';
+import { useId } from 'react';
+import { pageWindow, pageIndexForSize } from '../../core/table-model.js';
+import type { FdyPageState } from '../../core/table-model.js';
+import { FdyCombo } from './FdyCombo';
+
+/*
+ * The band under a table: what you are looking at, how much of it you see, where you are.
+ *
+ * `FdyTable` renders this itself, so most screens never import it. It is exported for the one shape
+ * that cannot use the table's own — a RESPONSIVE list, where a `.fdy-datatable` at `lg` and a
+ * `.fdy-list` below it are two renderings of ONE page of rows. A footer inside the table is inside
+ * the half that is hidden on a phone, so those screens need to render it once, outside both
+ * (improvement notes #005 and #008, from IDU_EMATE_APPL_WEB).
+ *
+ * It owns nothing. `page` in, `onPageChange` out — the same contract as the table's server mode.
+ */
+export interface FdyTableFooterProps {
+  /** The page being shown. `size` drives the range AND the rows-per-page control's value. */
+  page: FdyPageState;
+  onPageChange?: (page: FdyPageState) => void;
+  /**
+   * Offer a rows-per-page control. Omit for none — the footer is then range + pager, exactly as
+   * before. Picking a size calls `onPageChange` with the new `size` and the index that still holds
+   * the row you were looking at.
+   */
+  pageSizes?: readonly number[];
+}
+
+export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
+  const { index, size, total } = props.page;
+  /* The combo is labelled by the visible word beside it — a <label htmlFor> cannot reach inside a
+   * component, and an aria-label would leave that word attached to nothing. */
+  const sizeLabelId: string = useId();
+
+  const totalPages: number = size > 0 ? Math.max(1, Math.ceil(total / size)) : 1;
+  const currentPage1: number = index + 1;
+  const rangeFrom: number = total === 0 ? 0 : index * size + 1;
+  const rangeTo: number = Math.min(total, (index + 1) * size);
+  const pages: Array<number | 'ellipsis'> = pageWindow(currentPage1, totalPages);
+
+  const hasPager: boolean = size > 0 && totalPages > 1;
+  const sizes: readonly number[] = props.pageSizes ?? [];
+  /* One page and no size control means there is nothing here to say — the table has always withheld
+   * the whole band in that case, and this is where that decision now lives. */
+  if (!hasPager && sizes.length === 0) return null;
+
+  function goTo(page1: number): void {
+    const clamped: number = Math.min(Math.max(1, page1), totalPages);
+    props.onPageChange?.({ index: clamped - 1, size, total });
+  }
+
+  function onSize(value: string): void {
+    const next: number = Number(value);
+    if (!Number.isFinite(next) || next <= 0 || next === size) return;
+    props.onPageChange?.({ index: pageIndexForSize(index, size, next), size: next, total });
+  }
+
+  return (
+    <div className="fdy-table-footer">
+      <span className="fdy-table-footer__info">Showing {rangeFrom}–{rangeTo} of {total}</span>
+
+      {sizes.length > 0 && (
+        <div className="fdy-table-footer__size">
+          <span id={sizeLabelId}>Rows</span>
+          {/* The kit's own listbox, not a native <select>: an OS menu is unthemeable, and on macOS
+              it drops a dark panel into a light page. FdyCombo's own header says exactly that. */}
+          <FdyCombo
+            value={String(size)}
+            options={sizes.map((n: number) => ({ value: String(n), label: String(n) }))}
+            ariaLabelledby={sizeLabelId}
+            onChange={onSize}
+          />
+        </div>
+      )}
+
+      {hasPager && (
+        <nav aria-label="Pagination">
+          <ul className="fdy-pagination__list">
+            <li>
+              <button type="button" className="fdy-pagination__link" aria-label="Previous page" disabled={currentPage1 === 1} onClick={(): void => goTo(currentPage1 - 1)}>‹</button>
+            </li>
+            {pages.map((p: number | 'ellipsis', i: number): JSX.Element => (
+              <li key={typeof p === 'number' ? `p-${p}` : `gap-${i}`}>
+                {p === 'ellipsis' ? (
+                  <span className="fdy-pagination__ellipsis">…</span>
+                ) : p === currentPage1 ? (
+                  <span className="fdy-pagination__link" aria-current="page">{p}</span>
+                ) : (
+                  <button type="button" className="fdy-pagination__link" aria-label={`Go to page ${p}`} onClick={(): void => goTo(p)}>{p}</button>
+                )}
+              </li>
+            ))}
+            <li>
+              <button type="button" className="fdy-pagination__link" aria-label="Next page" disabled={currentPage1 === totalPages} onClick={(): void => goTo(currentPage1 + 1)}>›</button>
+            </li>
+          </ul>
+        </nav>
+      )}
+    </div>
+  );
+}

package/adapters/react/index.d.ts

@@ -36,6 +36,9 @@ export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components
 export { FdyCfl, type FdyCflProps, type CflColumn, type CflPage } from './components/FdyCfl';
 export { FdyChart, type FdyChartProps, type FdyChartSeries } from './components/FdyChart';
 export { FdyTable, type FdyTableProps } from './components/FdyTable';
+/** The table's own footer, standalone — for a responsive list whose table is hidden at some
+ *  breakpoints and so cannot host it. */
+export { FdyTableFooter, type FdyTableFooterProps } from './components/FdyTableFooter';
 export { FdyModal, type FdyModalProps } from './components/FdyModal';
 export { FdyDrawer, type FdyDrawerProps } from './components/FdyDrawer';
 

package/adapters/react/index.js

@@ -8,5 +8,6 @@ export { FdyCascade } from './components/FdyCascade.tsx';
 export { FdyCfl } from './components/FdyCfl.tsx';
 export { FdyChart } from './components/FdyChart.tsx';
 export { FdyTable } from './components/FdyTable.tsx';
+export { FdyTableFooter } from './components/FdyTableFooter.tsx';
 export { FdyModal } from './components/FdyModal.tsx';
 export { FdyDrawer } from './components/FdyDrawer.tsx';

package/adapters/vue/components/FdyAutocomplete.vue

@@ -172,7 +172,7 @@ watch(active, async (i: number): Promise<void> => {
         @mousemove="active = i"
         @click="choose(opt)"
       >{{ opt }}</li>
-      <li v-if="filtered.length === 0" class="fdy-autocomplete__empty">{{ emptyText ?? 'Tak ada hasil.' }}</li>
+      <li v-if="filtered.length === 0" class="fdy-autocomplete__empty">{{ emptyText ?? 'No results' }}</li>
     </ul>
   </div>
 </template>

package/adapters/vue/components/FdyCascade.vue

@@ -73,7 +73,7 @@ const active: Ref<number> = ref(-1);
 usePopover(panelEl, triggerEl, open);
 
 const sep: ComputedRef<string> = computed((): string => props.separator ?? ' / ');
-const name: ComputedRef<string> = computed((): string => props.label ?? 'Pilih');
+const name: ComputedRef<string> = computed((): string => props.label ?? 'Select');
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
 const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
@@ -88,7 +88,7 @@ const isPlaceholder: ComputedRef<boolean> = computed((): boolean => selectedTrai
 const displayValue: ComputedRef<string> = computed((): string =>
   selectedTrail.value !== null
     ? selectedTrail.value.map((n: CascadeNode): string => n.label).join(sep.value)
-    : (props.placeholder ?? 'Pilih…'),
+    : (props.placeholder ?? 'Select…'),
 );
 const crumb: ComputedRef<string> = computed((): string =>
   stack.value.length > 0 ? stack.value.map((n: CascadeNode): string => n.label).join(sep.value) : name.value,

package/adapters/vue/components/FdyCfl.vue

@@ -30,6 +30,20 @@ const props = defineProps<{
   rowKey: (row: Row) => string;
   /** Advisory only — the caller's `fetchPage` owns paging; kept for API documentation. */
   pageSize?: number;
+  /** The dialog's heading. Default 'Choose data', matching the Blazor adapter's `Title`. */
+  title?: string;
+  /** Placeholder AND accessible name of the dialog's search box. Default 'Search…'. */
+  searchPlaceholder?: string;
+  /** Default 'Loading…'. */
+  loadingText?: string;
+  /** Default 'No results.'. */
+  emptyText?: string;
+  /** Default 'Try again'. */
+  retryText?: string;
+  /** Default 'Load more'. */
+  moreText?: string;
+  /** aria-label for the dialog's close button. Default 'Close'. */
+  closeLabel?: string;
   placeholder?: string;
   disabled?: boolean;
   /** Locked/view mode: shows the picked value (focusable, copyable), but the search dialog can't be opened. Unlike `disabled`, it keeps tab order and isn't greyed. */
@@ -304,8 +318,8 @@ onBeforeUnmount((): void => {
 
     <dialog ref="dialogEl" class="fdy-modal fdy-modal--cfl" :aria-labelledby="titleId" @close="onClose" @keydown="onKeydown">
       <div class="fdy-modal__header">
-        <h3 :id="titleId" class="fdy-modal__title">Pilih data</h3>
-        <button class="fdy-modal__close" type="button" aria-label="Tutup" @click="closeDialog">&times;</button>
+        <h3 :id="titleId" class="fdy-modal__title">{{ title ?? 'Choose data' }}</h3>
+        <button class="fdy-modal__close" type="button" :aria-label="closeLabel ?? 'Close'" @click="closeDialog">&times;</button>
       </div>
 
       <div class="fdy-modal__body">
@@ -322,8 +336,8 @@ onBeforeUnmount((): void => {
               class="fdy-input"
               type="search"
               :value="query"
-              placeholder="Cari…"
-              aria-label="Cari data"
+              :placeholder="searchPlaceholder ?? 'Search…'"
+              :aria-label="searchPlaceholder ?? 'Search…'"
               :aria-controls="controlsId"
               :aria-activedescendant="activeDescendant"
               @input="onSearchInput"
@@ -332,17 +346,17 @@ onBeforeUnmount((): void => {
         </div>
 
         <div class="fdy-cfl__results">
-          <p v-if="isInitialLoading" class="fdy-cfl__empty" role="status">Memuat…</p>
+          <p v-if="isInitialLoading" class="fdy-cfl__empty" role="status">{{ loadingText ?? 'Loading…' }}</p>
 
           <div v-else-if="isBlockingError" class="fdy-cfl__empty" role="alert">
             <p style="margin:0 0 var(--space-3)">{{ error?.message }}</p>
-            <button class="fdy-btn fdy-btn--sm" type="button" @click="retry">Coba lagi</button>
+            <button class="fdy-btn fdy-btn--sm" type="button" @click="retry">{{ retryText ?? 'Try again' }}</button>
           </div>
 
-          <p v-else-if="isEmpty" class="fdy-cfl__empty">Tidak ada hasil.</p>
+          <p v-else-if="isEmpty" class="fdy-cfl__empty">{{ emptyText ?? 'No results.' }}</p>
 
           <template v-else>
-            <table :id="resultsId" class="fdy-table" aria-label="Hasil pencarian">
+            <table :id="resultsId" class="fdy-table" aria-label="Search results">
               <thead>
                 <tr>
                   <th v-for="col in columns" :key="col.key" scope="col">{{ col.label }}</th>
@@ -369,7 +383,7 @@ onBeforeUnmount((): void => {
             </div>
             <div v-else-if="hasMore" style="padding:var(--space-3) var(--space-4);text-align:center">
               <button class="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button" :disabled="loading" @click="loadMore">
-                {{ loading ? 'Memuat…' : 'Muat lebih banyak' }}
+                {{ loading ? (loadingText ?? 'Loading…') : (moreText ?? 'Load more') }}
               </button>
             </div>
           </template>
@@ -377,9 +391,9 @@ onBeforeUnmount((): void => {
       </div>
 
       <div class="fdy-modal__footer">
-        <span class="fdy-cfl__count">Klik baris untuk memilih</span>
+        <span class="fdy-cfl__count">Click a row to choose it</span>
         <div class="fdy-cfl__actions">
-          <button class="fdy-btn fdy-btn--ghost" type="button" @click="closeDialog">Tutup</button>
+          <button class="fdy-btn fdy-btn--ghost" type="button" @click="closeDialog">{{ closeLabel ?? 'Close' }}</button>
         </div>
       </div>
     </dialog>

package/adapters/vue/components/FdyTable.vue

@@ -7,7 +7,6 @@ import {
   filterRows,
   sortRows,
   paginate,
-  pageWindow,
 } from '../../core/table-model.js';
 import type {
   FdyTableColumn,
@@ -17,6 +16,7 @@ import type {
   FdyPageState,
 } from '../../core/table-model';
 import FdyTableFilter from './FdyTableFilter.vue';
+import FdyTableFooter from './FdyTableFooter.vue';
 
 // A controlled Vue data table over freeday's `.fdy-datatable` / `.fdy-table*` / `.fdy-filter*` /
 // `.fdy-pagination__*` classes. Unlike the freeday-table.js enhancer (which snapshots static rows
@@ -29,7 +29,10 @@ import FdyTableFilter from './FdyTableFilter.vue';
 //     (`update:sort` / `update:filters` / `update:page`) for the caller to feed back into its query.
 // Column filters (text/enum/number/date) apply live; in server mode, debounce the emit if needed.
 
-const props = defineProps<{
+/* `pager` MUST go through withDefaults: Vue's boolean-cast gives an omitted Boolean prop `false`,
+   not `undefined`, so a plain `props.pager !== false` would withhold the footer from every table that
+   never mentions it. Same trap as FdyModal's `dismissible`. */
+const props = withDefaults(defineProps<{
   columns: ReadonlyArray<FdyTableColumn<Row>>;
   rows: ReadonlyArray<Row>;
   rowKey: (row: Row) => string | number;
@@ -48,6 +51,21 @@ const props = defineProps<{
    * card list from the `process` event can render one pager for both breakpoints and point it here.
    * Omit for the internal index (unchanged default).
    */
+  /** Withhold the table's own footer (pager + range) so the screen can render one. Server mode had
+   *  no way to do this: the app owns the page there ANYWAY, and was still handed a second control —
+   *  a responsive list that shows a table at one breakpoint and cards at another ended up with the
+   *  kit's pager stacked under its own. Client mode's counterpart is `pageIndex`. Default true. */
+  pager?: boolean;
+  /**
+   * Offer a rows-per-page control in the footer, beside the range and the pager. Omit for none
+   * (unchanged default). Every back office has one, and a table that renders two thirds of its own
+   * footer forces the app to rebuild all three to add the last (#008).
+   *
+   * Server mode reports the pick through `update:page` — same event as a page click, with a new
+   * `size`. Client mode keeps it internally and also emits `update:pageSize`, so the control works
+   * with nothing wired and can still be persisted.
+   */
+  pageSizes?: readonly number[];
   pageIndex?: number;
   loading?: boolean;
   emptyText?: string;
@@ -58,7 +76,7 @@ const props = defineProps<{
   rowClass?: (row: Row) => string | undefined;
   /** Controlled: row keys whose `row-detail` slot is shown as a full-width row beneath them. */
   expandedKeys?: ReadonlyArray<string | number>;
-}>();
+}>(), { pager: true });
 
 const emit = defineEmits<{
   'update:sort': [sort: FdySortState | null];
@@ -67,6 +85,9 @@ const emit = defineEmits<{
   /** Client mode with `pageIndex` provided: the table asks for a new 0-based index (pager click, or
    *  a reset to 0 after sort/filter, or a clamp when filtering shrank the set). */
   'update:pageIndex': [index: number];
+  /** Client mode with `pageSizes`: the reader picked a new rows-per-page. The table has already
+   *  applied it — this is for a caller that wants to persist the choice. */
+  'update:pageSize': [size: number];
   /** A row was activated (click, or Enter/Space while the row itself is focused). */
   'row-activate': [row: Row];
   /** The processed page of rows (after filter/sort/paginate) plus the total row count — fires in
@@ -78,6 +99,11 @@ const emit = defineEmits<{
 const internalSort: Ref<FdySortState | null> = ref(null);
 const internalFilters: Ref<FdyFilterMap> = ref({});
 const internalPageIndex: Ref<number> = ref(0);
+/* Client-mode rows-per-page. `pageSize` is a plain prop with no event, so a footer control that only
+ * emitted would do nothing in the app that wired nothing — the table applies the pick itself and
+ * reports it. An explicit change to the prop wins back: the parent said something newer. */
+const internalPageSize: Ref<number | null> = ref(null);
+watch((): number | undefined => props.pageSize, (): void => { internalPageSize.value = null; });
 
 const serverPaged: ComputedRef<boolean> = computed((): boolean => props.page != null);
 const sortControlled: ComputedRef<boolean> = computed((): boolean => serverPaged.value || props.sort !== undefined);
@@ -122,31 +148,28 @@ function setClientPage(index0: number): void {
   } else internalPageIndex.value = index0;
 }
 
+const pageSizeEff: ComputedRef<number> = computed((): number =>
+  serverPaged.value ? (props.page as FdyPageState).size : (internalPageSize.value ?? props.pageSize ?? 0),
+);
+
 const displayRows: ComputedRef<Row[]> = computed((): Row[] => {
   if (serverPaged.value) return props.rows.slice();
-  if (props.pageSize && props.pageSize > 0) return paginate(filteredSorted.value, clientPageIndex.value, props.pageSize);
+  if (pageSizeEff.value > 0) return paginate(filteredSorted.value, clientPageIndex.value, pageSizeEff.value);
   return filteredSorted.value;
 });
-
-const pageSizeEff: ComputedRef<number> = computed((): number =>
-  serverPaged.value ? (props.page as FdyPageState).size : (props.pageSize ?? 0),
-);
 const currentPage1: ComputedRef<number> = computed((): number =>
   (serverPaged.value ? (props.page as FdyPageState).index : clientPageIndex.value) + 1,
 );
 const totalPages: ComputedRef<number> = computed((): number =>
   pageSizeEff.value > 0 ? Math.max(1, Math.ceil(totalCount.value / pageSizeEff.value)) : 1,
 );
-const hasPager: ComputedRef<boolean> = computed((): boolean => pageSizeEff.value > 0 && totalPages.value > 1);
-const pages: ComputedRef<Array<number | 'ellipsis'>> = computed((): Array<number | 'ellipsis'> =>
-  pageWindow(currentPage1.value, totalPages.value),
-);
-const rangeFrom: ComputedRef<number> = computed((): number =>
-  totalCount.value === 0 ? 0 : (currentPage1.value - 1) * pageSizeEff.value + 1,
-);
-const rangeTo: ComputedRef<number> = computed((): number =>
-  totalCount.value === 0 ? 0 : rangeFrom.value - 1 + displayRows.value.length,
-);
+/* What the footer needs, in both modes: the range, the pager and the size control are all derived
+ * from these three numbers, so the table hands them over rather than restating them. */
+const footerPage: ComputedRef<FdyPageState> = computed((): FdyPageState => ({
+  index: currentPage1.value - 1,
+  size: pageSizeEff.value,
+  total: totalCount.value,
+}));
 
 // Client mode: keep the page in range when a filter shrinks the row set.
 watch(totalPages, (tp: number): void => {
@@ -200,6 +223,20 @@ function goTo(page1: number): void {
   }
 }
 
+/* One event carries both intents, so which one it was is read off `size`. */
+function onFooterPage(next: FdyPageState): void {
+  if (next.size !== pageSizeEff.value) {
+    if (serverPaged.value) emit('update:page', next);
+    else {
+      internalPageSize.value = next.size;
+      emit('update:pageSize', next.size);
+      setClientPage(next.index);
+    }
+    return;
+  }
+  goTo(next.index + 1);
+}
+
 function cellClass(col: FdyTableColumn<Row>): string | undefined {
   return col.mono === true ? 'fdy-mono' : undefined;
 }
@@ -287,35 +324,11 @@ function isExpanded(row: Row): boolean {
       </table>
     </div>
 
-    <div v-if="hasPager" class="fdy-table-footer">
-      <span class="fdy-table-footer__info">Showing {{ rangeFrom }}–{{ rangeTo }} of {{ totalCount }}</span>
-      <nav aria-label="Pagination">
-        <ul class="fdy-pagination__list">
-          <li>
-            <button
-              type="button"
-              class="fdy-pagination__link"
-              aria-label="Previous page"
-              :disabled="currentPage1 === 1"
-              @click="goTo(currentPage1 - 1)"
-            >‹</button>
-          </li>
-          <li v-for="(p, i) in pages" :key="typeof p === 'number' ? p : `gap-${i}`">
-            <span v-if="p === 'ellipsis'" class="fdy-pagination__ellipsis">…</span>
-            <span v-else-if="p === currentPage1" class="fdy-pagination__link" aria-current="page">{{ p }}</span>
-            <button v-else type="button" class="fdy-pagination__link" :aria-label="`Go to page ${p}`" @click="goTo(p)">{{ p }}</button>
-          </li>
-          <li>
-            <button
-              type="button"
-              class="fdy-pagination__link"
-              aria-label="Next page"
-              :disabled="currentPage1 === totalPages"
-              @click="goTo(currentPage1 + 1)"
-            >›</button>
-          </li>
-        </ul>
-      </nav>
-    </div>
+    <FdyTableFooter
+      v-if="pager !== false"
+      :page="footerPage"
+      :page-sizes="pageSizes"
+      @update:page="onFooterPage"
+    />
   </div>
 </template>