@tint-ui/data-table 0.3.5

package/styles-toolbar.module.css

@@ -0,0 +1,70 @@
+.toolbar {
+  @apply flex items-center justify-between gap-3 mb-3 w-full max-w-full;
+  container-type: inline-size;
+  container-name: toolbar;
+}
+
+.heading {
+  @apply text-base leading-tight font-medium text-muted-foreground ml-5 self-center;
+}
+[data-size=sm] .heading {
+  @apply text-sm leading-tight;
+}
+
+.withFilter {
+  @apply grid gap-0;
+  grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
+}
+.withFilter > .heading {
+  @apply invisible whitespace-nowrap w-0 ml-0;
+}
+
+.withFilterGroup {
+  @apply flex-col;
+}
+
+.search,
+.filters,
+.reset {
+  @apply mr-3;
+}
+.search:empty,
+.filters:empty,
+.reset:empty {
+  @apply mr-0 w-0 min-w-0;
+}
+
+.filters [data-type=slider-viewport] {
+  @apply -m-1;
+}
+
+.mobile {
+  @apply w-full max-w-full;
+}
+.mobile:nth-child(1) {
+  @apply grid;
+  grid-template-columns: minmax(0, 1fr) min-content min-content;
+}
+
+@container toolbar (max-width: 1023px) {
+  button[data-type=toolbar-button-options] {
+    @apply px-0;
+  }
+  button[data-type=toolbar-button-options] > span {
+    @apply sr-only;
+  }
+  button[data-type=toolbar-button-options] > svg {
+    @apply mx-0 !important;
+  }
+}
+@container toolbar (max-width: 767px) {
+  button[data-type=toolbar-button-reset] {
+    @apply px-0;
+  }
+  button[data-type=toolbar-button-reset] > span {
+    @apply sr-only;
+  }
+  button[data-type=toolbar-button-reset] > svg {
+    @apply mx-0 !important;
+  }
+}

package/styles-toolbar.module.scss

@@ -0,0 +1,67 @@
+.toolbar {
+	@apply flex items-center justify-between gap-3 mb-3 w-full max-w-full;
+	container-type: inline-size;
+	container-name: toolbar;
+}
+
+.heading {
+	@apply text-base leading-tight font-medium text-muted-foreground ml-5 self-center;
+	[data-size="sm"] & {
+		@apply text-sm leading-tight;
+	}
+}
+
+.withFilter {
+	@apply grid gap-0;
+	grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
+	> .heading {
+		@apply invisible whitespace-nowrap w-0 ml-0;
+	}
+}
+
+.withFilterGroup {
+	@apply flex-col;
+}
+
+.search,
+.filters,
+.reset {
+	@apply mr-3;
+	&:empty {
+		@apply mr-0 w-0 min-w-0;
+	}
+}
+
+.filters [data-type="slider-viewport"] {
+	@apply -m-1;
+}
+
+.mobile {
+	@apply w-full max-w-full;
+	&:nth-child(1) {
+		@apply grid;
+		grid-template-columns: minmax(0, 1fr) min-content min-content;
+	}
+}
+
+@mixin iconButton() {
+	@apply px-0;
+	> span {
+		@apply sr-only;
+	}
+	> svg {
+		@apply mx-0 #{!important};
+	}
+}
+
+@container toolbar (max-width: 1023px) {
+	button[data-type="toolbar-button-options"] {
+		@include iconButton();
+	}
+}
+
+@container toolbar (max-width: 767px) {
+	button[data-type="toolbar-button-reset"] {
+		@include iconButton();
+	}
+}

package/styles.css

@@ -0,0 +1 @@
+.tui-data-table{border-radius:var(--radius);border-width:1px;padding-left:.25rem;padding-right:.25rem;position:relative}.tui-data-table_cell-type--boolean{align-items:center;display:inline-flex;justify-content:center;vertical-align:top}.tui-data-table_icon--true{color:hsl(var(--primary))}.tui-data-table_icon--false{color:hsl(var(--destructive))}.tui-data-table_icon--null{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.tui-data-table_menu-group{align-items:center;display:flex}.tui-data-table_menu-group>button:not(:first-of-type){border-bottom-left-radius:0;border-top-left-radius:0}.tui-data-table_menu-group>button:not(:last-of-type){border-bottom-right-radius:0;border-top-right-radius:0}.tui-data-table_menu-group>button~button{margin-left:-1px}.tui-data-table_menu-item-destructive{color:hsl(var(--destructive))}.tui-data-table_menu-item-destructive:hover{background-color:hsl(var(--destructive-foreground));color:hsl(var(--destructive))}

package/styles.json

@@ -0,0 +1,8 @@
+{
+	"styles": [
+		{ "template": "data-table.module.scss", "name": "styles", "classes": "classes" },
+		{ "template": "data-table-filter.module.scss", "name": "styles-filter", "classes": "filterClasses" },
+		{ "template": "data-table-toolbar.module.scss", "name": "styles-toolbar", "classes": "toolbarClasses" },
+		{ "template": "data-table-pagination.module.scss", "name": "styles-pagination", "classes": "paginationClasses" }
+	]
+}

package/styles.module.css

@@ -0,0 +1,39 @@
+.dataTable {
+  @apply relative border rounded-lg px-1;
+}
+
+.booleanCellType {
+  @apply inline-flex justify-center items-center align-top;
+}
+
+.iconTrue {
+  @apply text-primary;
+}
+
+.iconFalse {
+  @apply text-destructive;
+}
+
+.iconNull {
+  @apply text-gray-500;
+}
+
+.menuGroup {
+  @apply flex items-center;
+}
+.menuGroup > button:not(:first-of-type) {
+  @apply rounded-l-none;
+}
+.menuGroup > button:not(:last-of-type) {
+  @apply rounded-r-none;
+}
+.menuGroup > button ~ button {
+  @apply -ml-[1px];
+}
+
+.menuItemDestructive {
+  @apply text-destructive;
+}
+.menuItemDestructive:hover {
+  @apply bg-destructive-foreground text-destructive;
+}

package/styles.module.scss

@@ -0,0 +1,38 @@
+.dataTable {
+	@apply relative border rounded-lg px-1;
+}
+
+.booleanCellType {
+	@apply inline-flex justify-center items-center align-top;
+}
+.iconTrue {
+	@apply text-primary;
+}
+.iconFalse {
+	@apply text-destructive;
+}
+.iconNull {
+	@apply text-gray-500;
+}
+
+.menuGroup {
+	@apply flex items-center;
+	> button {
+		&:not(:first-of-type) {
+			@apply rounded-l-none;
+		}
+		&:not(:last-of-type) {
+			@apply rounded-r-none;
+		}
+		& ~ button {
+			@apply -ml-[1px];
+		}
+	}
+}
+
+.menuItemDestructive {
+	@apply text-destructive;
+	&:hover {
+		@apply bg-destructive-foreground text-destructive;
+	}
+}

package/toolbar-classes.d.ts

@@ -0,0 +1,26 @@
+declare const toolbarClasses: {
+    toolbar: string;
+    withFilter: string;
+    withFilterGroup: string;
+    search: string;
+    filters: string;
+    reset: string;
+    options: string;
+    mobile: string;
+    heading: string;
+};
+declare const useDataTableToolbarClasses: () => {
+    toolbar: string;
+    withFilter: string;
+    withFilterGroup: string;
+    search: string;
+    filters: string;
+    reset: string;
+    options: string;
+    mobile: string;
+    heading: string;
+};
+type DataTableToolbarClassesType = keyof typeof toolbarClasses;
+type DataTableToolbarClasses = Record<DataTableToolbarClassesType, string>;
+export { toolbarClasses, useDataTableToolbarClasses };
+export type { DataTableToolbarClassesType, DataTableToolbarClasses };

package/toolbar-classes.js

@@ -0,0 +1,20 @@
+import { classGroup } from "@tint-ui/tools/class-group";
+import { useClasses } from "@tint-ui/theme";
+const {
+  base,
+  b,
+  a
+} = classGroup("data-table-toolbar");
+const toolbarClasses = {
+  toolbar: base,
+  withFilter: a("with-filter"),
+  withFilterGroup: a("with-filter-group"),
+  search: b("search"),
+  filters: b("filters"),
+  reset: b("reset"),
+  options: b("options"),
+  mobile: b("mobile"),
+  heading: b("heading")
+};
+const useDataTableToolbarClasses = () => useClasses("data-table-toolbar", toolbarClasses);
+export { toolbarClasses, useDataTableToolbarClasses };

package/types.d.ts

@@ -0,0 +1,226 @@
+import * as React from "react";
+import type { Table } from "@tanstack/react-table";
+import type { InputSelectOption } from "@tint-ui/tools";
+import type { TriggerProp } from "@tint-ui/trigger";
+interface FilterRangeType {
+    total?: number;
+    limit?: number;
+    offset?: number;
+}
+interface FilterType<TData> extends FilterRangeType {
+    filter?: Record<keyof TData, unknown>;
+    filterText?: string;
+    sortBy?: keyof TData | string | null;
+    sortDir?: "asc" | "desc";
+}
+interface OptionTrigger<TData> {
+    id: string;
+    trigger?: TriggerProp;
+    label: string;
+    enabledKey?: keyof TData | string;
+    icon?: string;
+    destructive?: boolean;
+    confirmation?: string | null;
+}
+export type RowMenuOption<TData> = OptionTrigger<TData> & {
+    onClick?: (data: TData) => void;
+    triggerKey?: keyof TData;
+};
+export type SelectedOption<TData> = OptionTrigger<TData> & {
+    separate?: boolean;
+    onClick?: (ids: unknown[]) => void;
+};
+export type DataTableToolbarSize = "sm" | "md" | "lg";
+export type DataTableNavbarSize = "sm" | "md" | "lg";
+export interface DataTableCoreProps<TData> extends FilterType<TData> {
+    table: DataTableType<TData>;
+    data: TData[] | DataTableCallbackType<TData>;
+    initialData?: TData[];
+    lexicon?: Partial<DataTableLexicon>;
+    header?: "top" | "bottom" | "both" | "none";
+    onRowClick?: (data: TData) => void;
+    toolbar?: {
+        size?: DataTableToolbarSize;
+        viewIconOnly?: boolean;
+        resetIconOnly?: boolean;
+    } | null;
+    navbar?: Partial<Omit<NavbarConfig, "onPageSizeChange">> | null;
+    compact?: boolean;
+    cacheable?: boolean;
+}
+export type StringOrFn = string | (() => string);
+export interface DataTableLexicon {
+    filterSearch: string | ((data: {
+        label: string;
+    }) => string);
+    filterSelected: string | ((data: {
+        selected: number;
+    }) => string);
+    filterClear: StringOrFn;
+    filterReset: StringOrFn;
+    filterNotFound: StringOrFn;
+    view: StringOrFn;
+    viewOptions: StringOrFn;
+    viewFilterText: StringOrFn;
+    viewFilter: StringOrFn;
+    viewSortBy: StringOrFn;
+    viewColumn: StringOrFn;
+    pageFirst: StringOrFn;
+    pageLast: StringOrFn;
+    pagePrevious: StringOrFn;
+    pageNext: StringOrFn;
+    notFound: StringOrFn;
+    notFoundFiltered: StringOrFn;
+    search: StringOrFn;
+    selected: string | ((data: {
+        selected: number;
+        size: number;
+    }) => string);
+    onePageTitle: string | ((data: {
+        size: number;
+    }) => string);
+    pageOf: string | ((data: {
+        pageNumber: number;
+        pageCount: number;
+    }) => string);
+    title: string | ((data: {
+        size: number;
+        total: number;
+        limit: number;
+        offset: number;
+        pageNumber: number;
+        pageCount: number;
+    }) => string);
+}
+export type DataTableResponse<TData> = {
+    data: TData[];
+} & Omit<FilterType<TData>, keyof FilterRangeType> & Required<FilterRangeType>;
+export type FilterData<TData> = Required<FilterType<TData>>;
+export type DataTableCallbackType<TData> = (filter: FilterData<TData>) => DataTableResponse<TData> | Promise<DataTableResponse<TData>>;
+export interface DataTableType<TData> {
+    name: string;
+    keyName?: string;
+    selectable?: SelectedOption<TData>[];
+    cells: DataTableCellType<keyof TData>[];
+    storage?: boolean | string;
+    ssr?: boolean;
+    rowMenu?: null | {
+        mode?: "button" | "popover";
+        align?: "start" | "end";
+        menu: RowMenuOption<TData>[];
+    } | RowMenuOption<TData>[];
+    requiredFilterText?: boolean;
+}
+export interface DataTableCellType<TValue = string, TConfig extends object = any> {
+    name: TValue extends string ? TValue : string;
+    label: string;
+    type?: "text" | "number" | "date" | "boolean" | string;
+    required?: boolean;
+    hidden?: boolean;
+    invisible?: boolean;
+    sortable?: boolean;
+    searchable?: boolean;
+    config?: TConfig;
+    defaultSortDir?: "asc" | "desc";
+    filter?: InputSelectOption[] | FilterOptionCallbackType | DataTableFilterType | null;
+}
+export interface DataTableFilterType<FConfig extends object = any> {
+    type?: "option" | string;
+    valueType?: "string" | "number" | "boolean";
+    label?: string;
+    multiple?: boolean;
+    config?: FConfig;
+    hidden?: boolean;
+    required?: boolean;
+}
+export interface DataTableFilterOptionConfig {
+    options: InputSelectOption[] | FilterOptionCallbackType;
+    type?: "string" | "number" | "boolean";
+    initialOptions?: InputSelectOption[];
+    icon?: string;
+    disableSearch?: boolean;
+    autoSelect?: boolean;
+    groupBy?: string;
+}
+export type DataTableDisplayCell<TValue = string, TConfig extends object = any> = Required<Omit<DataTableCellType<TValue, TConfig>, "filter">> & {
+    filter: boolean;
+};
+export type DataTableDisplayFilter<TName = string, FConfig extends object = any> = Required<DataTableFilterType<FConfig>> & {
+    name: TName extends string ? TName : string;
+};
+/**
+ * The mode of the option query.
+ */
+export type FilterOptionQueryMode = "initial" | "lost" | "search";
+/**
+ * The type of the option callback for dynamic options.
+ */
+export type FilterOptionCallbackType<T = string> = (text: string, values: T[], mode: FilterOptionQueryMode, abortController: AbortController) => InputSelectOption[] | Promise<InputSelectOption[]>;
+export type DataTableCellAdapter<TConfig extends object, TValue = string, TData = any> = (value: unknown, cell: DataTableDisplayCell<TValue, TConfig>, data: TData) => React.ReactNode;
+export type DataTableCellAdapterOptions<TConfig extends object, TValue = string, TData = any> = {
+    nullable?: (cell: DataTableDisplayCell<TValue, TConfig>, data: TData) => React.ReactNode;
+    width?: string | number;
+    align?: "start" | "end" | "center";
+};
+export type DataTableFilterAdapter<TName = string, FConfig extends object = any> = (filter: DataTableDisplayFilter<TName, FConfig>) => React.ReactNode;
+export type FilterVisibility<TData> = {
+    filterText: boolean;
+    getVisibleFilters(): DataTableDisplayFilter<keyof TData>[];
+    getFilters(): DataTableDisplayFilter<keyof TData>[];
+    hasFilterVisible(name: keyof TData | string): boolean;
+    onFilterVisibleChange(name: keyof TData | string, visible: boolean): void;
+    onFilterTextVisibleChange(visible: boolean): void;
+};
+export type LexiconType = {
+    readonly [key in keyof Omit<DataTableLexicon, "filterSearch" | "filterSelected">]: string;
+} & {
+    filterSearch(label: string): string;
+    filterSelected(selected: number): string;
+};
+export type ToolbarConfig = {
+    size: DataTableToolbarSize;
+    viewIconOnly: boolean;
+    resetIconOnly: boolean;
+    onFilterReset(): void;
+};
+export type NavbarConfig = {
+    size: DataTableNavbarSize;
+    pageSize: number;
+    numberSize: number;
+    pageSizeOptions: number[];
+    mode: "arrow" | "number";
+    onPageSizeChange(value: number): void;
+};
+export type DynamicConfig = {
+    column: boolean;
+    sort: boolean;
+    filter: boolean;
+    filterText: boolean;
+};
+export type HeaderConfig = {
+    top: boolean;
+    bottom: boolean;
+};
+export type DataTableContextType<TData> = {
+    hash: string;
+    data: TData[];
+    table: Table<TData>;
+    cells: DataTableDisplayCell<keyof TData>[];
+    filters: DataTableDisplayFilter<keyof TData>[];
+    dynamic: DynamicConfig;
+    loading: boolean;
+    loadingTarget: string | null;
+    error: string | null;
+    invisible: {
+        [key: string]: boolean | undefined;
+    };
+    totalCount: number;
+    lexicon: LexiconType;
+    header: HeaderConfig;
+    toolbar: ToolbarConfig;
+    navbar: NavbarConfig;
+    filterVisible: FilterVisibility<TData>;
+    manual: boolean;
+    getRowClickHandler(data: TData): ((event: React.MouseEvent) => void) | undefined;
+};
+export {};

package/types.js

@@ -0,0 +1,2 @@
+export {};
+export {};

package/use-data-table.d.ts

@@ -0,0 +1,3 @@
+import { DataTableCoreProps, DataTableContextType } from "./types";
+declare const useDataTable: <TData extends object>(props: DataTableCoreProps<TData>) => DataTableContextType<TData>;
+export { useDataTable };