@servicetitan/table 22.4.5 → 23.0.0

package/src/demo/index.ts

@@ -1,3 +1,4 @@
 export * from './overview';
 export * from './master-detail';
 export * from './state-caching';
+export * from './column-hiding';

package/src/filters/standard-filter-with-multiselect/filter-cell-ext.tsx

@@ -38,7 +38,7 @@ export interface FilterCellExtProps extends TableColumnMenuFilterCellProps {
     multiselectTagRender?(
         tagData: MultiSelectTagData,
         li: ReactElement<HTMLLIElement>
-    ): ReactElement<HTMLLIElement> | null;
+    ): ReactElement<HTMLLIElement>;
     multiselectListNoDataRender?(element: ReactElement<HTMLDivElement>): ReactNode;
 }
 

package/src/table-state.ts

@@ -86,6 +86,7 @@ interface TableStateConstructorParams<
     getDetailTableState?: (row: T) => TableState<any, any, any, any> | undefined;
     initialState?: TableStateModel<TId>;
     alwaysEditable?: boolean;
+    rowIdKey?: string;
 }
 
 interface FetchDataParams {
@@ -128,6 +129,7 @@ export interface ITableState<T, TId extends IdType = never> {
 
 export class TableState<T, TId extends IdType = never, P = never, PId extends IdType = never> {
     @observable private innerDataSource: DataSource<T, TId> | null;
+
     @computed get dataSource() {
         return this.innerDataSource;
     }
@@ -157,7 +159,8 @@ export class TableState<T, TId extends IdType = never, P = never, PId extends Id
         }
     }
 
-    @computed private get originalData() {
+    @computed
+    private get originalData() {
         const result: Selectable<T>[] = [];
 
         this.traverse(this.data, item => {
@@ -188,19 +191,25 @@ export class TableState<T, TId extends IdType = never, P = never, PId extends Id
     @observable filteredCount = 0;
     @observable selectedCount = 0;
     @observable unselectableCount = 0;
+
     @computed get unselectedCount() {
         return this.totalCount - this.selectedCount;
     }
+
     @computed get selectableCount() {
         return this.totalCount - this.unselectableCount;
     }
+
     @computed get filteredUnselectableCount() {
         return this.originalData.filter(this.isRowUnselectable).length;
     }
+
     @computed get filteredSelectableCount() {
         return this.originalData.length - this.filteredUnselectableCount;
     }
-    @computed private get totalFilteredSelectableCountPromise() {
+
+    @computed
+    private get totalFilteredSelectableCountPromise() {
         return fromPromise(
             new Promise<number>((resolve, reject) => {
                 if (!this.dataSource) {
@@ -221,19 +230,23 @@ export class TableState<T, TId extends IdType = never, P = never, PId extends Id
             })
         );
     }
+
     @computed get totalFilteredSelectableCount(): number {
         return (this.totalFilteredSelectableCountPromise.value as number) || 0;
     }
+
     @observable sort: SortDescriptor[] = [];
     @observable filter: CompositeFilterDescriptor | undefined;
 
     @observable aggregates: AggregateDescriptor[] = [];
 
     @observable innerGroup: GroupDescriptor[] = [];
+
     @computed
     get group(): GroupDescriptor[] {
         return addAggregatesToGroups(this.innerGroup, this.aggregates);
     }
+
     set group(value: GroupDescriptor[]) {
         this.innerGroup = value;
     }
@@ -244,10 +257,12 @@ export class TableState<T, TId extends IdType = never, P = never, PId extends Id
     private tablePdfExport: TablePDFExport | null = null;
     private tableExcelExport: ExcelExport | null = null;
 
+    rowIdKey?: string;
     alwaysEditable: boolean;
 
     constructor({
         dataSource = null,
+        rowIdKey,
         pageSize,
         isRowUnselectable = () => false,
         selectionLimit = Infinity,
@@ -263,6 +278,7 @@ export class TableState<T, TId extends IdType = never, P = never, PId extends Id
         this.pageSize = pageSize;
         this.isRowUnselectable = isRowUnselectable;
         this.selectionLimit = selectionLimit;
+        this.rowIdKey = rowIdKey;
 
         this.getFormState = getFormState;
 

package/src/table.stories.tsx

@@ -0,0 +1,15 @@
+import {
+    TableExample,
+    TableMasterDetailExample,
+    TableStateCachingExample,
+    TableColumnHidingExample
+} from '../dist/demo';
+
+export default {
+    title: 'Table/Demos'
+};
+
+export const Table = () => <TableExample />;
+export const TableMasterDetail = () => <TableMasterDetailExample />;
+export const TableStateCaching = () => <TableStateCachingExample />;
+export const TableColumnHiding = () => <TableColumnHidingExample />;

package/src/table.tsx

@@ -81,6 +81,7 @@ interface TableColumnProps<
 
 type ExcludedTableProps =
     | 'data'
+    | 'dataItemKey'
     | 'editField'
     | 'filter'
     | 'onFilterChange'
@@ -133,6 +134,8 @@ export class Table<
         />
     ));
 
+    private customCellMap = new Map<string, FC<TableCellProps<T, TId, P, PId>>>();
+
     private selectHeaderCell: FC<TableHeaderCellProps> = observer((props: TableHeaderCellProps) => {
         if (this.props.hideSelectAll || this.tableState.selectionLimit !== Infinity) {
             return null;
@@ -154,14 +157,10 @@ export class Table<
     // TODO: rid of "memoizeOne" after migration on React.FC
     private withCellTableState = memoizeOne((children: ReactNode) =>
         this.applyToColumns(children, column => {
-            const { cell: Cell } = column.props;
+            const { cell: Cell, field } = column.props;
 
             return cloneElement(column, {
-                cell:
-                    Cell &&
-                    ((props: TableCellProps<T, TId, P, PId>) => (
-                        <Cell {...props} tableState={this.tableState} />
-                    )),
+                cell: this.getOrCreateCellComponentWithTableState(Cell, field),
             });
         })
     );
@@ -327,6 +326,7 @@ export class Table<
             <AnvilTable
                 ref={this.ref}
                 {...props}
+                dataItemKey={this.tableState.rowIdKey}
                 data={[...this.tableState.data]}
                 rowRender={this.rowRender}
                 editField="inEdit"
@@ -354,6 +354,7 @@ export class Table<
                     <TableColumn
                         locked
                         field="selected"
+                        id="selected"
                         width="50px"
                         filterable={false}
                         resizable={false}
@@ -372,6 +373,28 @@ export class Table<
             </AnvilTable>
         );
     };
+
+    private getOrCreateCellComponentWithTableState = (
+        Cell: any,
+        field?: string
+    ): FC<TableCellProps<T, TId, P, PId>> | undefined => {
+        if (!Cell) {
+            return undefined;
+        }
+
+        const CellWithTableState: FC<TableCellProps<T, TId, P, PId>> = (
+            props: TableCellProps<T, TId, P, PId>
+        ) => <Cell {...props} tableState={this.tableState} />;
+        CellWithTableState.displayName = 'CellWithTableState';
+
+        if (field) {
+            if (this.customCellMap.has(field)) {
+                return this.customCellMap.get(field)!;
+            }
+            this.customCellMap.set(field, CellWithTableState);
+        }
+        return CellWithTableState;
+    };
 }
 
 const sanitizeExportFileName = memoizeOne((fileName: string | undefined) =>