aio-table 8.0.1 → 9.0.0

package/index.css

@@ -1,216 +0,0 @@
-.table {
-  background: #eee;
-  overflow: hidden;
-  flex: 1;
-  font-size: 12px;
-  color: #888;
-  padding: 12px;
-}
-
-.table-header {
-  position: sticky !important;
-  top: 0;
-  z-index: 10;
-  overflow: visible;
-  font-weight: bold;
-  user-select: none;
-  background: #ddd;
-  box-shadow: 0 3px 6px 0px rgba(80, 80, 80, 0.2)
-}
-
-.row-relative-filter {
-  opacity: 0.4;
-}
-
-.table-title {
-  background: #f8f8f8;
-  height: 48px;
-}
-
-.cell-content {
-  display: flex;
-  overflow: hidden;
-}
-
-.cell-subtext {
-  font-size: 74%;
-  opacity: 0.5;
-}
-
-.row {
-  box-shadow: 0 3px 6px 0px rgba(80, 80, 80, 0.2);
-}
-
-.cell {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  flex-shrink: 0;
-  background: #fff;
-}
-
-.cell.striped {
-  background: #f7f7f7;
-}
-
-.table-toggle {
-  width: 16px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.table-toolbar {
-  padding: 8px;
-  display: flex;
-  width: 100%;
-  align-items: center;
-}
-
-.table-paging {
-  padding: 8px;
-}
-
-.toolbar-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  width: 30px !important;
-  background: #fff;
-  height: 30px;
-  margin: 0 3px;
-  border-radius: 100%;
-}
-
-.table-toolbar-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  min-width: 30px !important;
-  background: #fff;
-  height: 30px;
-  margin: 0 3px;
-  border-radius: 36px;
-}
-
-.toolbar-popup-header {
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
-  border-bottom: 1px solid #ddd;
-
-}
-
-.aio-table-search {
-  flex: 1;
-  border-radius: 36px;
-  background: #fff;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  border: 1px solid #eee;
-  padding: 0 6px;
-  box-sizing: border-box;
-  margin: 0 3px;
-}
-
-.aio-table-search input {
-  font-family: inherit;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  background: none;
-}
-
-.table-group-row {
-  height: 48px;
-  width: fit-content;
-
-}
-
-.table-filter-popup {
-  padding: 6px;
-  width: 300px;
-}
-
-.table-filter-add {
-  height: 24px;
-  width: 100%;
-  margin: 3px;
-  border: 1px solid #ddd;
-  background: #eee;
-}
-
-.table-filter-item {
-  padding: 3px;
-}
-
-.table-filter-operator {
-  border: 1px solid #ddd;
-  background: #fff;
-  height: 24px;
-  width: 100%;
-}
-
-.table-filter-value {
-  border: 1px solid #ddd;
-  padding: 0 3px;
-  width: 100%;
-  outline: none;
-  font-family: inherit;
-}
-
-.table-filter-remove {
-  border: 1px solid #ddd;
-}
-
-.table-inline-edit-input {
-  width: 100% !important;
-  height: 100%;
-  max-height: 36px;
-  border: none;
-  background: none;
-  outline: none;
-  font-family: inherit;
-  min-height: 16px;
-
-}
-
-.table-inline-edit-input:focus {
-  border-bottom: 2px solid dodgerblue;
-  border-top: 2px solid transparent;
-}
-
-/* custom scrollbar */
-.rows::-webkit-scrollbar {
-  width: 10px !important;
-  height: 10px !important;
-}
-
-.table-freeze-container::-webkit-scrollbar {
-  width: 0px !important;
-}
-
-.rows::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.rows::-webkit-scrollbar-thumb {
-  background-color: #cdd4e0;
-  border-radius: 20px;
-  border: 3px solid transparent;
-  background-clip: content-box;
-}
-
-.rows::-webkit-scrollbar-thumb {
-  background-color: #b1b9ca;
-}
-
-.rows::-webkit-scrollbar-thumb:hover {
-  background-color: #6f7888;
-}

package/index.d.ts

@@ -0,0 +1,139 @@
+import { ReactNode } from "react";
+import * as UT from 'aio-utils';
+import "./index.css";
+type I_rows<T> = {
+    rows: T[];
+    searchedRows: T[];
+    sortedRows: T[];
+    pagedRows: T[];
+};
+export type AI_table_param<T> = {
+    row: T;
+    column: I_column<T>;
+    rowIndex: number;
+};
+export type I_column<T> = {
+    title?: any;
+    value?: any;
+    sort?: true | I_sort<T>;
+    search?: boolean;
+    id?: string;
+    _id?: string;
+    width?: any;
+    minWidth?: any;
+    titleAttrs?: {
+        [key: string]: any;
+    } | string;
+    template?: string | ((p: {
+        row: T;
+        column: I_column<T>;
+        rowIndex: number;
+        change: (newRow: T) => void;
+    }) => ReactNode);
+    excel?: string | boolean;
+    justify?: boolean;
+    cellAttrs?: {
+        [key: string]: any;
+    } | ((p: {
+        row: T;
+        rowIndex: number;
+        column: I_column<T>;
+    }) => any) | string;
+};
+export type I_sort<T> = {
+    active?: boolean;
+    dir?: 'dec' | 'inc';
+    title?: ReactNode;
+    type?: 'string' | 'number';
+    sortId?: string;
+    getValue?: (row: T) => any;
+};
+export type I_context<T> = {
+    rootProps: I_AIOTable<T>;
+    columns: I_column<T>[];
+    ROWS: I_rows<T>;
+    add: () => void;
+    remove: (row: T, index: number) => void;
+    search: (searchValue: string) => void;
+    exportToExcel: () => void;
+    sorts: I_sort<T>[];
+    setSorts: (newSorts: I_sort<T>[]) => void;
+    sortRows: (rows: T[], sorts: I_sort<T>[]) => T[];
+    excelColumns: I_column<T>[];
+    getRowAttrs: (row: T, rowIndex: number) => any;
+    getCellAttrs: I_getCellAttrs<T>;
+    getDynamics: any;
+    DragColumns: UT.I_useDrag;
+    getIcon: UT.GetSvg["getIcon"];
+};
+export type I_getCellAttrs<T> = (p: {
+    row: T;
+    rowIndex: number;
+    column: I_column<T>;
+    type: 'title' | 'cell';
+}) => any;
+export type AI_table_paging = {
+    serverSide?: boolean;
+    number: number;
+    size: number;
+    length?: number;
+    sizes?: number[];
+};
+export type I_AIOTable<T> = {
+    addText?: ReactNode | ((value: any) => ReactNode);
+    columnGap?: number;
+    columns?: I_column<T>[];
+    excel?: string | ((value: any[]) => any[]);
+    getValue?: {
+        [key: string]: (p: {
+            row: T;
+            column: I_column<T>;
+            rowIndex: number;
+            change: (newRow: T) => void;
+        }) => any;
+    };
+    headerAttrs?: any;
+    onAdd?: () => Promise<T | undefined>;
+    onChangePaging?: (newPaging: AI_table_paging) => void;
+    onChangeSort?: (sorts: I_sort<T>[]) => Promise<boolean>;
+    onSwap?: true | ((newValue: T[], startRow: T, endRow: T) => void);
+    onSearch?: true | ((searchValue: string) => void);
+    paging?: AI_table_paging;
+    removeText?: string;
+    rowAfter?: (p: {
+        row: T;
+        rowIndex: number;
+    }) => ReactNode;
+    rowAttrs?: (p: {
+        row: T;
+        rowIndex: number;
+    }) => any;
+    rowBefore?: (p: {
+        row: T;
+        rowIndex: number;
+    }) => ReactNode;
+    rowGap?: number;
+    rowsTemplate?: (rows: T[]) => ReactNode;
+    rowTemplate?: (p: {
+        row: T;
+        rowIndex: number;
+        isLast: boolean;
+    }) => ReactNode;
+    toolbar?: ReactNode | (() => ReactNode);
+    toolbarAttrs?: any;
+    tabIndex?: number;
+    value: T[];
+    onChange?: (v: T[]) => void;
+    className?: string;
+    style?: any;
+    attrs?: any;
+    onRemove?: true | ((p: {
+        row: T;
+        action?: Function;
+        rowIndex?: number;
+        parent?: T;
+    }) => Promise<boolean | void>);
+    placeholder?: ReactNode;
+};
+declare const AIOTable: <T>(rootProps: I_AIOTable<T>) => JSX.Element;
+export default AIOTable;