aio-table 8.0.1 → 9.1.0

package/index.css

@@ -1,216 +1,226 @@
-.table {
-  background: #eee;
-  overflow: hidden;
-  flex: 1;
-  font-size: 12px;
-  color: #888;
-  padding: 12px;
+:root {
+    --aio-table-color: #0069ff;
+    --aio-table-transition: 0.3s;
 }
 
-.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)
+.aio-table-rtl {
+    direction: rtl;
 }
 
-.row-relative-filter {
-  opacity: 0.4;
+.aio-table .aio-table-text {
+    height: 100%;
 }
 
-.table-title {
-  background: #f8f8f8;
-  height: 48px;
+.aio-table-color input {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
 }
-
-.cell-content {
-  display: flex;
-  overflow: hidden;
+
+.aio-table-color img {
+    display: none;
 }
 
-.cell-subtext {
-  font-size: 74%;
-  opacity: 0.5;
+.aio-table-color input::-webkit-color-swatch {
+    border: none;
+    padding: 0;
 }
 
-.row {
-  box-shadow: 0 3px 6px 0px rgba(80, 80, 80, 0.2);
+.aio-table {
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 12px;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: #eee;
+    color: #888;
+    padding: 0;
+    border: 1px solid #eee;
+    gap: 0;
 }
 
-.cell {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  flex-shrink: 0;
-  background: #fff;
+.aio-table .aio-table {
+    color: inherit;
 }
 
-.cell.striped {
-  background: #f7f7f7;
+.aio-table-unit {
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+    display:flex;
+    flex-direction: column;
 }
 
-.table-toggle {
-  width: 16px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.aio-table-header {
+    top: 0;
+    display: flex;
+    position: sticky;
+    position: -webkit-sticky;
+    z-index: 10;
+    background: #f8f8f8;
+    min-width: fit-content;
 }
 
-.table-toolbar {
-  padding: 8px;
-  display: flex;
-  width: 100%;
-  align-items: center;
+.aio-table-title {
+    padding: 0 12px;
+    font-weight: bold;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    overflow: hidden;
 }
 
-.table-paging {
-  padding: 8px;
+.aio-table-title-justify {
+    padding: 0;
+    justify-content: center;
 }
-
-.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%;
+.aio-table-rows{
+    display:flex;
+    flex-direction: column;
+    gap:1px;
 }
-
-.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;
+.aio-table-row {
+    display: flex;
+    min-width: fit-content;
 }
-
-.toolbar-popup-header {
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
-  border-bottom: 1px solid #ddd;
-
+.aio-table-cell {
+    padding: 6px 12px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    min-height: 24px;
+    gap:6px;
+    background:#fff;
 }
 
-.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-cell-before{
+    display:flex;
+    align-items: center;
+    justify-content: center;
 }
-
-.aio-table-search input {
-  font-family: inherit;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  background: none;
+.aio-table-cell-after{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+.aio-table-cell-value{
+    flex:1;
+    display:flex;
+    flex-direction: column;
+}
+.aio-table-cell-value.has-subtext:after {
+    content: attr(data-subtext);
+    font-size: 85%;
+    opacity: 0.7;
+}
+.aio-table-cell .aio-table-container {
+    width: 100%;
 }
 
-.table-group-row {
-  height: 48px;
-  width: fit-content;
-
+.aio-table-cell .aio-table {
+    width: 100%;
+    background: none;
+    border: none;
+    border-radius: 0;
+    background: none;
+    height: 100%;
+    min-height: 30px;
 }
 
-.table-filter-popup {
-  padding: 6px;
-  width: 300px;
+.aio-table-cell .aio-table input {
+    padding: 0;
+    background: none;
 }
 
-.table-filter-add {
-  height: 24px;
-  width: 100%;
-  margin: 3px;
-  border: 1px solid #ddd;
-  background: #eee;
+.aio-table-cell-justify.aio-table-cell{
+    padding: 0 !important;
+}
+.aio-table-cell-justify .aio-table-cell-value{
+    padding: 0;
+    align-items: center;
 }
 
-.table-filter-item {
-  padding: 3px;
+.aio-table-cell-justify > input {
+    text-align: center;
 }
 
-.table-filter-operator {
-  border: 1px solid #ddd;
-  background: #fff;
-  height: 24px;
-  width: 100%;
+.aio-table-toolbar {
+    left: 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    background: #f8f8f8;
+    z-index: 100;
+    box-sizing: border-box;
+    min-height: 36px;
 }
 
-.table-filter-value {
-  border: 1px solid #ddd;
-  padding: 0 3px;
-  width: 100%;
-  outline: none;
-  font-family: inherit;
+.aio-table-toolbar-content {
+    font-weight: bold;
+    padding: 0 12px;
+    height: 100%;
+    display: flex;
+    align-items: center;
 }
 
-.table-filter-remove {
-  border: 1px solid #ddd;
+.aio-table-toolbar-button {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    border: none;
+    background: none;
 }
 
-.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;
+.aio-table-remove {
+    border: none;
+    width: 36px;
+    background: none;
+    color: inherit;
+    align-items: center;
+    display: flex;
 }
 
-/* custom scrollbar */
-.rows::-webkit-scrollbar {
-  width: 10px !important;
-  height: 10px !important;
+.aio-table-remove-title {
+    border: none;
+    width: 36px;
+    background: none;
+    color: inherit;
 }
 
-.table-freeze-container::-webkit-scrollbar {
-  width: 0px !important;
+.aio-table-border-h {
+    height: 1px;
+    flex-shrink: 0;
 }
 
-.rows::-webkit-scrollbar-track {
-  background-color: transparent;
+.aio-table-border-v {
+    width: 1px;
+    flex-shrink: 0;
 }
 
-.rows::-webkit-scrollbar-thumb {
-  background-color: #cdd4e0;
-  border-radius: 20px;
-  border: 3px solid transparent;
-  background-clip: content-box;
+.aio-table-search {
+    flex: 1;
+    height: 100%;
+    padding: 6px;
+    box-sizing: border-box;
 }
 
-.rows::-webkit-scrollbar-thumb {
-  background-color: #b1b9ca;
+.aio-table-search .aio-input {
+    background: #fff;
+    border: none;
+    min-height: 30px;
 }
 
-.rows::-webkit-scrollbar-thumb:hover {
-  background-color: #6f7888;
-}

package/index.d.ts

@@ -0,0 +1,98 @@
+import { ReactNode } from "react";
+import "./index.css";
+import { I_filter, I_filter_item, I_filter_saved_item, I_paging, I_sort } from "../../aio-component-utils";
+type I_rowOption<T, R> = (p: I_rowDetail<T>) => R;
+type I_cellOption<T, R> = ((p: I_cellDetail<T>) => R) | string;
+type I_rowDetail<T> = {
+    row: T;
+    rowIndex: number;
+    isFirst: boolean;
+    isLast: boolean;
+};
+type I_cellDetail<T> = I_rowDetail<T> & {
+    column: I_table_column<T>;
+    change: (newRow: T) => void;
+    isDate: boolean;
+};
+export type I_table_paging = I_paging;
+export type I_table_sort<T> = I_sort<T>;
+export type I_table_filter = I_filter;
+export type I_table_filter_item = I_filter_item;
+export type I_table_filter_saved_item = I_filter_saved_item;
+export type I_table_column<T> = {
+    title?: any;
+    sort?: true | I_table_sort<T>;
+    filterId?: string;
+    search?: boolean;
+    id?: string;
+    _id?: string;
+    width?: any;
+    minWidth?: any;
+    excel?: string | boolean;
+    justify?: boolean;
+    value?: string;
+    attrs?: I_cellOption<T, {
+        [attrs: string]: any;
+    }>;
+    before?: I_cellOption<T, ReactNode>;
+    after?: I_cellOption<T, ReactNode>;
+    subtext?: I_cellOption<T, ReactNode>;
+    template?: I_cellOption<T, ReactNode>;
+    titleAttrs?: {
+        [attrs: string]: any;
+    };
+    type?: 'text' | 'number' | 'month' | 'day' | 'hour' | 'minute';
+};
+export type I_table<T> = {
+    fa?: boolean;
+    addText?: ReactNode | ((value: any) => ReactNode);
+    columns?: I_table_column<T>[];
+    excel?: string | ((value: any[]) => any[]);
+    getValue?: {
+        [key: string]: (p: {
+            row: T;
+            column: I_table_column<T>;
+            rowIndex: number;
+            change: (newRow: T) => void;
+        }) => any;
+    };
+    headerAttrs?: any;
+    onAdd?: () => Promise<T | undefined>;
+    onRemove?: (p: {
+        row: T;
+        rowIndex?: number;
+    }) => Promise<boolean>;
+    onChangePaging?: (newPaging: I_table_paging) => void;
+    onChangeSort?: (sorts: I_table_sort<T>[]) => Promise<boolean>;
+    onSwap?: true | ((newValue: T[], startRow: T, endRow: T) => void);
+    onSearch?: true | ((searchValue: string) => void);
+    paging?: I_table_paging;
+    removeText?: string;
+    rowOption?: {
+        before?: I_rowOption<T, ReactNode>;
+        after?: I_rowOption<T, ReactNode>;
+        attrs?: I_rowOption<T, {
+            [attrs: string]: any;
+        }>;
+        template?: I_rowOption<T, ReactNode>;
+    };
+    cellAttrs?: string | ((p: {
+        row: T;
+        column: I_table_column<T>;
+        rowIndex: number;
+    }) => any);
+    rowsTemplate?: (rows: T[]) => ReactNode;
+    toolbar?: ReactNode | (() => ReactNode);
+    toolbarAttrs?: any;
+    tabIndex?: number;
+    value: T[];
+    onChange?: (v: T[]) => void;
+    className?: string;
+    style?: any;
+    attrs?: any;
+    placeholder?: ReactNode;
+    filter?: I_table_filter;
+    gap?: [number, number];
+};
+declare const AIOTable: <T>(props: I_table<T>) => JSX.Element;
+export default AIOTable;