aplance-ui 1.0.1

package/registry/components/ui/data-table/filter-bar.tsx

@@ -0,0 +1,33 @@
+import { Fragment } from 'react'
+import type { FilterBarProps } from './types'
+import s from './data-table.module.css'
+
+/**
+ * Headless single-row filter bar.
+ * Each field owns its rendering via a render-prop and sets its own grid
+ * column width. The bar never wraps - consumers pick widths that fit.
+ *
+ * Width defaults: input fields → `1fr`, actions → `auto`.
+ */
+export const FilterBar = ({ fields, values, onChange }: FilterBarProps) => {
+  const gridCols = fields
+    .map((f) => f.width ?? (f.type === 'action' ? 'auto' : '1fr'))
+    .join(' ')
+
+  return (
+    <div className={s.filter_bar} style={{ gridTemplateColumns: gridCols }}>
+      {fields.map((field, i) => (
+        <Fragment
+          key={field.type === 'action' ? `act:${i}` : `k:${field.key}`}
+        >
+          {field.type === 'action'
+            ? field.render()
+            : field.render({
+                value: values[field.key] ?? '',
+                onChange: (v) => onChange(field.key, v),
+              })}
+        </Fragment>
+      ))}
+    </div>
+  )
+}

package/registry/components/ui/data-table/pagination-bar.tsx

@@ -0,0 +1,125 @@
+import { Button } from '../button/button'
+import { CustomSelect } from '../input-fields/custom-select/custom-select'
+import type { PaginationBarProps } from './types'
+import s from './data-table.module.css'
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+} from '@tabler/icons-react'
+
+export const PaginationBar = <TData,>({
+  table,
+  pagination,
+  onPaginationChange,
+  pageSizeOptions,
+  showPageSizeSelect,
+  totalCount,
+  rowLabel,
+  rowsSelectable,
+  selectedCount,
+  extra,
+}: PaginationBarProps<TData>) => {
+  const pageCount = table.getPageCount()
+  const total = totalCount ?? table.getRowCount()
+  const canPrev = table.getCanPreviousPage()
+  const canNext = table.getCanNextPage()
+
+  const goTo = (i: number) =>
+    onPaginationChange({ ...pagination, pageIndex: i })
+  const setSize = (size: number) =>
+    onPaginationChange({ pageIndex: 0, pageSize: size })
+
+  // Always show all page size options - current pageSize is guaranteed in the list.
+  const sizeOptions = Array.from(
+    new Set([...pageSizeOptions, pagination.pageSize]),
+  )
+    .sort((a, b) => a - b)
+    .map((n) => ({ value: String(n), label: String(n) }))
+
+  return (
+    <div className={s.pagination_bar}>
+      {/* left - count + optional bulk-action extra slot */}
+      <div className={s.pagination_left}>
+        <p className={s.pagination_count}>
+          {rowsSelectable && selectedCount > 0 ? (
+            <>
+              <span>{selectedCount}</span> of <span>{total}</span> {rowLabel}(s)
+              selected
+            </>
+          ) : (
+            <>
+              <span>{total}</span> {rowLabel}(s)
+            </>
+          )}
+        </p>
+        {extra}
+      </div>
+
+      {/* right - rows-per-page + page x of y + nav buttons */}
+      {pageCount > 0 && (
+        <div className={s.pagination_controls}>
+          {showPageSizeSelect && (
+            <div className={s.page_size_wrap}>
+              <span className={s.page_size_label}>{rowLabel}s per page</span>
+              <CustomSelect
+                options={sizeOptions}
+                value={String(pagination.pageSize)}
+                popover={{position: "top"}}
+                onChange={(val) =>
+                  setSize(Number(Array.isArray(val) ? val[0] : val))
+                }
+                selectButton={{ showChevron: true, showClear: false }}
+              />
+            </div>
+          )}
+
+          <p className={s.page_indicator}>
+            Page <span>{pagination.pageIndex + 1}</span> of{' '}
+            <span>{pageCount}</span>
+          </p>
+
+          <div className={s.page_nav}>
+            <Button
+              variant="bordered"
+              layout="box"
+              onClick={() => goTo(0)}
+              disabled={!canPrev}
+              aria-label="First page"
+            >
+              <IconChevronsLeft size={14} stroke={2} />
+            </Button>
+            <Button
+              variant="bordered"
+              layout="box"
+              onClick={() => goTo(pagination.pageIndex - 1)}
+              disabled={!canPrev}
+              aria-label="Previous page"
+            >
+              <IconChevronLeft size={14} stroke={2} />
+            </Button>
+            <Button
+              variant="bordered"
+              layout="box"
+              onClick={() => goTo(pagination.pageIndex + 1)}
+              disabled={!canNext}
+              aria-label="Next page"
+            >
+              <IconChevronRight size={14} stroke={2} />
+            </Button>
+            <Button
+              variant="bordered"
+              layout="box"
+              onClick={() => goTo(pageCount - 1)}
+              disabled={!canNext}
+              aria-label="Last page"
+            >
+              <IconChevronsRight size={14} stroke={2} />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}