1.0.15 - optimizing TypeScript API to not have to use enums for prope…

…rties

component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "active-table",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Framework agnostic table component for editable data experience",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",

component/src/activeTable.ts

@@ -30,12 +30,12 @@ import {StickyPropsUtils} from './utils/stickyProps/stickyPropsUtils';
 import {ExportSingleFile, Files, ImportOptions} from './types/files';
 import {ActiveOverlayElements} from './types/activeOverlayElements';
 import {CellHighlightUtils} from './utils/color/cellHighlightUtils';
+import {DEFAULT_COLUMN_TYPES_STR} from './enums/defaultColumnTypes';
 import {ColumnsSettingsMap} from './types/columnsSettingsInternal';
 import {ExportFile, ImportFile} from './types/fileTriggerMethods';
 import {customElement, property, state} from 'lit/decorators.js';
 import {RowDropdownSettings} from './types/rowDropdownSettings';
 import {StripedRowsInternal} from './types/stripedRowsInternal';
-import {DEFAULT_COLUMN_TYPES} from './enums/defaultColumnTypes';
 import {DefaultCellHoverColors} from './types/cellStateColors';
 import {WindowElement} from './elements/window/windowElement';
 import {UserKeyEventsState} from './types/userKeyEventsState';
@@ -268,7 +268,7 @@ export class ActiveTable extends LitElement {
   isColumnResizable?: boolean;
 
   @property({type: Array})
-  availableDefaultColumnTypes?: DEFAULT_COLUMN_TYPES[]; // this will reduce the default types to ones included here
+  availableDefaultColumnTypes?: DEFAULT_COLUMN_TYPES_STR[]; // this will reduce the default types to ones included here
 
   @property({type: Array})
   customColumnTypes?: ColumnTypes; // additional custom column types

component/src/enums/defaultColumnTypes.ts

@@ -8,3 +8,13 @@ export enum DEFAULT_COLUMN_TYPES {
   SELECT = 'Select',
   LABEL = 'Label',
 }
+
+export type DEFAULT_COLUMN_TYPES_STR =
+  | 'Text'
+  | 'Number'
+  | 'Currency'
+  | 'Date d-m-y'
+  | 'Date m-d-y'
+  | 'Checkbox'
+  | 'Select'
+  | 'Label';

component/src/types/columnType.ts

@@ -1,5 +1,5 @@
 import {LabelOptions, SelectOptions, CellDropdownT} from './cellDropdown';
-import {DEFAULT_COLUMN_TYPES} from '../enums/defaultColumnTypes';
+import {DEFAULT_COLUMN_TYPES_STR} from '../enums/defaultColumnTypes';
 import {CustomTextProcessing} from './customTextProcessing';
 import {IconSettings} from './dropdownButtonItem';
 import {Calendar} from './calendarFunctionality';
@@ -10,7 +10,7 @@ import {Sorting} from './sorting';
 // This is to be used by the client exclusively
 
 // can reuse one of the existing icons
-export type ColumnIconSettings = InterfacesUnion<{reusableIconName: DEFAULT_COLUMN_TYPES} | IconSettings>;
+export type ColumnIconSettings = InterfacesUnion<{reusableIconName: DEFAULT_COLUMN_TYPES_STR} | IconSettings>;
 
 interface Parent {
   name: string;

component/src/utils/columnSettings/columnSettingsUtils.ts

@@ -12,12 +12,13 @@ import {DefaultColumnsSettings} from '../../types/columnsSettingsDefault';
 import {ColumnSettingsBorderUtils} from './columnSettingsBorderUtils';
 import {ColumnSettingsStyleUtils} from './columnSettingsStyleUtils';
 import {ColumnSettingsWidthUtils} from './columnSettingsWidthUtils';
+import {DEFAULT_COLUMN_TYPES} from '../../enums/defaultColumnTypes';
 import {ColumnTypesUtils} from '../columnType/columnTypesUtils';
 import {ResetColumnStructure} from './resetColumnStructure';
 import {CellElement} from '../../elements/cell/cellElement';
 import {GenericObject} from '../../types/genericObject';
-import {ActiveTable} from '../../activeTable';
 import {EMPTY_STRING} from '../../consts/text';
+import {ActiveTable} from '../../activeTable';
 
 export class ColumnSettingsUtils {
   private static updateSizer(at: ActiveTable, columnIndex: number) {
@@ -118,7 +119,7 @@ export class ColumnSettingsUtils {
 
   private static setDefaultTypeProperties(at: ActiveTable) {
     const {_defaultColumnsSettings} = at;
-    _defaultColumnsSettings.availableDefaultColumnTypes = at.availableDefaultColumnTypes;
+    _defaultColumnsSettings.availableDefaultColumnTypes = at.availableDefaultColumnTypes as DEFAULT_COLUMN_TYPES[];
     _defaultColumnsSettings.customColumnTypes = at.customColumnTypes;
     _defaultColumnsSettings.defaultColumnTypeName = at.defaultColumnTypeName;
     _defaultColumnsSettings.types = ColumnTypesUtils.getProcessedTypes(_defaultColumnsSettings);

other-packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "active-table-react",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Active Table wrapper for React",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",
@@ -33,7 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "@lit-labs/react": "^1.1.1",
-    "active-table": "1.0.14"
+    "active-table": "1.0.15"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

website/docs/docs/installation.mdx

@@ -19,5 +19,5 @@ npm install active-table-react
 Access the component via CDN:
 
 ```
-https://unpkg.com/active-table@1.0.14/dist/activeTable.bundle.js
+https://unpkg.com/active-table@1.0.15/dist/activeTable.bundle.js
 ```

website/docs/examples/design.mdx

@@ -8,7 +8,7 @@ Basic examples to help you get started with Active Table.
 
 ### Unique column types {#uniqueColumnTypes}
 
-This example makes use of the [`customColumnsSettings`](../docs/column#customColumnsSettings) property to set static types for individual columns. The _Date Created_
+This example makes use of the [`customColumnsSettings`](/docs/column#customColumnsSettings) property to set static types for individual columns. The _Date Created_
 column has two available date formats.
 
 import TableContainerProgrammaticUpdates from '@site/src/components/table/tableContainerProgrammaticUpdates';
@@ -197,8 +197,8 @@ Table configuration for a dark design.
 
 ### Dynamic updates {#dynamicUpdates}
 
-The programmatic cell update functionality is provided by the [`updateCell`](../docs/methods#updateCell) method that exists on the component element reference.
-The example additionally makes use of properties like [`customColumnsSettings`](../docs/column#customColumnsSettings) and [`stripedRows`](../docs/row#stripedRows)
+The programmatic cell update functionality is provided by the [`updateCell`](/docs/methods#updateCell) method that exists on the component element reference.
+The example additionally makes use of properties like [`customColumnsSettings`](/docs/column#customColumnsSettings) and [`stripedRows`](/docs/row#stripedRows)
 to set a stock related look. Whilst all of the columns are set to not be editable, the _Stock_ column allows its data to be changed and its rows to be sorted.
 
 <TableContainerProgrammaticUpdates isStock={true} minHeight="300">

website/docs/examples/files.mdx

@@ -79,7 +79,7 @@ declare global {
 
 ## Examples
 
-React project that uses a package bundler - should work similarly for other [Frameworks](./frameworks):
+React project that uses a package bundler - should work similarly for other [Frameworks](/examples/frameworks):
 
 [Click for Live Example](https://codesandbox.io/s/active-table-react-xlsx-h3j7rq?file=/src/App.tsx)
 

website/package.json

@@ -18,7 +18,7 @@
     "@docusaurus/preset-classic": "^2.3.0",
     "@docusaurus/theme-search-algolia": "^2.3.1",
     "@mdx-js/react": "^1.6.22",
-    "active-table-react": "^1.0.14",
+    "active-table-react": "^1.0.15",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",