Refactor DeesTable component: modularize data handling and styles

- Moved column computation and data retrieval logic to a new data.ts file for better separation of concerns.
- Created a styles.ts file to encapsulate all CSS styles related to the DeesTable component.
- Updated the DeesTable class to utilize the new data handling functions and styles.
- Introduced selection and filtering features, allowing for single and multi-row selection.
- Enhanced rendering logic to accommodate selection checkboxes and filtering capabilities.
- Re-exported types from types.ts for better type management and clarity.

ts_web/elements/dees-table/dees-table.demo.ts

@@ -467,6 +467,44 @@ export const demoFunc = () => html`
           dataName="users"
         ></dees-table>
       </div>
+
+      <div class="demo-section" 
+           @selectionChange=${(e: CustomEvent) => { console.log('Selection changed', e.detail); }}
+           @search-changed=${(e: CustomEvent) => {
+             const tbl = document.getElementById('tableFilterSelectDemo') as any;
+             if (tbl) tbl.setFilterText(e.detail.value);
+           }}
+           @search-submit=${(e: CustomEvent) => {
+             const tbl = document.getElementById('tableFilterSelectDemo') as any;
+             if (tbl) tbl.setFilterText(e.detail.value);
+           }}
+      >
+        <h2 class="demo-title">Filtering + Multi-Selection (New)</h2>
+        <p class="demo-description">Use the search bar to filter rows; toggle selection via checkboxes. Click headers to sort.</p>
+        <dees-searchbar></dees-searchbar>
+        <div style="height: 12px"></div>
+        <dees-table
+          id="tableFilterSelectDemo"
+          heading1="Inventory (Filter + Select)"
+          heading2="Try typing to filter and selecting multiple rows"
+          .selectionMode=${'multi'}
+          .rowKey=${'sku'}
+          .columns=${[
+            { key: 'sku', header: 'SKU', sortable: true },
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'stock', header: 'Stock', sortable: true },
+          ]}
+          .data=${[
+            { sku: 'A-100', name: 'USB-C Cable', stock: 120 },
+            { sku: 'A-101', name: 'Wireless Mouse', stock: 55 },
+            { sku: 'A-102', name: 'Laptop Stand', stock: 18 },
+            { sku: 'B-200', name: 'Keyboard (ISO)', stock: 89 },
+            { sku: 'B-201', name: 'HDMI Adapter', stock: 0 },
+            { sku: 'C-300', name: 'Webcam 1080p', stock: 42 },
+          ]}
+          dataName="items"
+        ></dees-table>
+      </div>
     </div>
   </div>
 `;