From 001819c8caf5c58fd94b72b94a28a02153d9d6a6 Mon Sep 17 00:00:00 2001
From: Daniel Schischkin | Surplex <daniel.schischkin@surplex.com>
Date: Fri, 5 Feb 2021 16:47:02 +0100
Subject: [PATCH 1/5] Add new concept to README

---
 README.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6849937..1428529 100644
--- a/README.md
+++ b/README.md
@@ -12,4 +12,69 @@ A Table Component with some batteries included.
 ## Installation
 
 
-## Examples
\ No newline at end of file
+## Examples
+
+### Simple usage
+```svelte
+<script lang="ts">
+    import { Table, Header, Row } from "surplex/svelte-tabula";
+    const data: any[] = [
+        {id: 1, name: "Daniel", jobTitle: "Software craftsman"},
+        {id: 3, name: "Max", jobTitle: "Head of Development"},
+        {id: 2, name: "Mustermann", jobTitle: "Tester"},
+    ];
+    const headerDefinitions: HeaderDefinition[] = [
+        {prop: "id", name: "Id", editable: false, sortable: true, filterable: true},
+        {prop: "name", name: "Name", editable: true, sortable: true, filterable: true},
+        {prop: "jobTitle", name: "Job Title", editable: false, sortable: false, filterable: false},
+    ];
+</script>
+<Table>
+    <Header {headerDefinitions}/>
+    {#each data as row}
+        <Row data={row} />
+    {/each}
+</Table>
+```
+
+### Modify the editable property at column level
+```svelte
+<script lang="ts">
+    import { Table, Header, Row, Column } from "surplex/svelte-tabula";
+    const data: any[] = [
+        {id: 1, name: "Daniel", jobTitle: "Software craftsman"},
+        {id: 3, name: "Max", jobTitle: "Head of Development"},
+        {id: 2, name: "Mustermann", jobTitle: "Tester"},
+    ];
+    const headerDefinitions: HeaderDefinition[] = [
+        {prop: "id", name: "Id", editable: false, sortable: true, filterable: true},
+        {prop: "name", name: "Name", editable: true, sortable: true, filterable: true},
+        {prop: "jobTitle", name: "Job Title", editable: false, sortable: false, filterable: false},
+    ];
+</script>
+<Table>
+    <Header {headerDefinitions}/>
+    {#each data as row}
+        <Row>
+            {#each row as column}
+                <Column data={column} editable={row.name == "Daniel"}>
+            {/each}
+        </Row>
+    {/each}
+</Table>
+```
+
+### Styling
+Tabula uses the defined table structure in [html53](https://www.w3.org/TR/html53/tabular-data.html#tabular-data).  
+Pass an `options` object to the `<Table>` component to modify the different elements inside the table.
+```svelte
+<script lang="ts">
+// ...
+const styling: Object = {
+    table: ['table-class'],
+    td: ['bg-gray-500', 'hover:bg-gray-700']
+};
+</script>
+<Table {options}>
+</Table>
+```

From 6574086d8fd602912d89046a7e6de0116e41b635 Mon Sep 17 00:00:00 2001
From: Daniel Schischkin <daniel@schischkin.info>
Date: Mon, 8 Feb 2021 08:56:19 +0100
Subject: [PATCH 2/5] [WIP] Refactor Component Structure

---
 README.md                                     | 11 ++--
 package-lock.json                             |  3 +-
 src/Column.svelte                             | 26 ---------
 src/Factory/RowDefinitionFactory.ts           | 12 ----
 .../Sort.svelte => Filters/SortFilter.svelte} |  2 -
 .../TextFilter.svelte}                        |  4 --
 src/Header.svelte                             | 56 +++++++++++++------
 src/Interfaces/ColumnDefinition.ts            |  4 --
 src/Interfaces/HeaderDefinition.ts            | 10 ++--
 src/Interfaces/RowDefinition.ts               |  4 --
 src/Row.svelte                                | 13 +----
 src/Table.svelte                              | 43 ++++++++------
 src/context.ts                                |  1 +
 src/index.ts                                  |  3 -
 src/stores.ts                                 |  4 ++
 15 files changed, 85 insertions(+), 111 deletions(-)
 delete mode 100644 src/Column.svelte
 delete mode 100644 src/Factory/RowDefinitionFactory.ts
 rename src/{Misc/Sort.svelte => Filters/SortFilter.svelte} (99%)
 rename src/{Misc/Filter.svelte => Filters/TextFilter.svelte} (90%)
 delete mode 100644 src/Interfaces/ColumnDefinition.ts
 delete mode 100644 src/Interfaces/RowDefinition.ts
 create mode 100644 src/context.ts
 create mode 100644 src/stores.ts

diff --git a/README.md b/README.md
index 1428529..d1dc363 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ A Table Component with some batteries included.
     ];
 </script>
 <Table>
-    <Header {headerDefinitions}/>
+    <Header slot="head" {headerDefinitions}/>
     {#each data as row}
         <Row data={row} />
     {/each}
@@ -40,7 +40,7 @@ A Table Component with some batteries included.
 ### Modify the editable property at column level
 ```svelte
 <script lang="ts">
-    import { Table, Header, Row, Column } from "surplex/svelte-tabula";
+    import { Table, Header, Row, Column, FilterEvent } from "surplex/svelte-tabula";
     const data: any[] = [
         {id: 1, name: "Daniel", jobTitle: "Software craftsman"},
         {id: 3, name: "Max", jobTitle: "Head of Development"},
@@ -53,12 +53,11 @@ A Table Component with some batteries included.
     ];
 </script>
 <Table>
-    <Header {headerDefinitions}/>
+    <Header slot="head" on:sort={() => data.sort()} on:filter={(event: FilterEvent) => {}} {headerDefinitions}/>
     {#each data as row}
         <Row>
-            {#each row as column}
-                <Column data={column} editable={row.name == "Daniel"}>
-            {/each}
+            <!-- slot name equals prop value in HeaderDefinition -->
+            <td slot="name">Daniel</td>
         </Row>
     {/each}
 </Table>
diff --git a/package-lock.json b/package-lock.json
index 8f885e4..f963130 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,7 +1,8 @@
 {
   "name": "svelte-tabula",
-  "requires": true,
+  "version": "0.0.2",
   "lockfileVersion": 1,
+  "requires": true,
   "dependencies": {
     "@babel/code-frame": {
       "version": "7.12.13",
diff --git a/src/Column.svelte b/src/Column.svelte
deleted file mode 100644
index 6db5326..0000000
--- a/src/Column.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { ColumnDefinition } from "./Interfaces/ColumnDefinition";
-
-  export let columnDefinition: ColumnDefinition;
-  
-  const dispatch = createEventDispatcher();
-  let editActive: boolean = false;
-  let value: string = columnDefinition.value ?? "";
-  
-  const triggerEditEvent = function (event: KeyboardEvent) {
-    if (event.code != "Enter") {
-      return;
-    }
-    editActive = false;
-    dispatch("edit", { columnDefinition, value, rawEvent: event });
-  };
-</script>
-
-<td on:click={() => (columnDefinition.editable ? (editActive = true) : null)}>
-  {#if columnDefinition.editable && editActive}
-    <textarea bind:value on:keydown={triggerEditEvent} />
-  {:else}
-    {value}
-  {/if}
-</td>
diff --git a/src/Factory/RowDefinitionFactory.ts b/src/Factory/RowDefinitionFactory.ts
deleted file mode 100644
index 81c88d8..0000000
--- a/src/Factory/RowDefinitionFactory.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ColumnDefinition } from "../Interfaces/ColumnDefinition"
-
-export class RowDefinitionFactory {
-    public static create(row: Object, editable: boolean = false) {
-        const columns: ColumnDefinition[] = Object.values(row).map(colum => {
-            return {editable, value: colum};
-        });
-        return {
-            columns
-        };
-    }
-}
\ No newline at end of file
diff --git a/src/Misc/Sort.svelte b/src/Filters/SortFilter.svelte
similarity index 99%
rename from src/Misc/Sort.svelte
rename to src/Filters/SortFilter.svelte
index 7b1d1fa..b2f7a5d 100644
--- a/src/Misc/Sort.svelte
+++ b/src/Filters/SortFilter.svelte
@@ -2,9 +2,7 @@
   import { createEventDispatcher } from "svelte";
   import { Sort } from "../Interfaces/Events/SortEvent";
   import { HeaderDefinition } from "../Interfaces/HeaderDefinition";
-
   export let headerDefinition: HeaderDefinition;
-
   const dispatch = createEventDispatcher();
   let currentSort: Sort = "normal";
   const getNewSort = () => {
diff --git a/src/Misc/Filter.svelte b/src/Filters/TextFilter.svelte
similarity index 90%
rename from src/Misc/Filter.svelte
rename to src/Filters/TextFilter.svelte
index f57c4d2..de0bd34 100644
--- a/src/Misc/Filter.svelte
+++ b/src/Filters/TextFilter.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import { HeaderDefinition } from "../Interfaces/HeaderDefinition";
-
   export let headerDefinition: HeaderDefinition;
-
-  let dropDownVisible: boolean = false;
-
   const dispatch = createEventDispatcher();
 </script>
 
diff --git a/src/Header.svelte b/src/Header.svelte
index 95d8b9c..b371f1c 100644
--- a/src/Header.svelte
+++ b/src/Header.svelte
@@ -1,31 +1,55 @@
 <script lang="ts">
+  import { getContext, onMount } from "svelte";
+  import { optionsKey } from "./context";
+  import SortFilter from "./Filters/SortFilter.svelte";
+  import TextFilter from "./Filters/TextFilter.svelte";
   import { HeaderDefinition } from "./Interfaces/HeaderDefinition";
-  import Filter from "./Misc/Filter.svelte";
-  import Sort from "./Misc/Sort.svelte";
+  import { headerDefinitions as hdStore } from "./stores";
+  export let headerDefinitions: HeaderDefinition[] = [];
+  onMount(() => {
+    hdStore.set(headerDefinitions);
+  });
 
-  export let headerDefinition: HeaderDefinition;
+  const { getClassesForElement } = getContext(optionsKey);
+  let dropDownVisible: HeaderDefinition | undefined = undefined;
 
-  let dropDownVisible: boolean = false;
+  const setDropDown = (headerDefinition: HeaderDefinition) => {
+    if (headerDefinition === dropDownVisible) {
+      dropDownVisible = undefined;
+    }
+    dropDownVisible = headerDefinition;
+  };
 </script>
 
-<th on:click={() => (dropDownVisible = !dropDownVisible)}>
-  {headerDefinition.text}
-  <section style={dropDownVisible ? "display: block;" : "display: none"}>
-    {#if headerDefinition.sortable}
-      <Sort {headerDefinition} on:sort />
-    {/if}
-    {#if headerDefinition.filterable}
-      <Filter {headerDefinition} on:filter />
-    {/if}
-  </section>
-</th>
+<tr class={getClassesForElement("tr")}>
+  {#each headerDefinitions as headerDefinition}
+    <th
+      on:click={() => setDropDown(headerDefinition)}
+      class={getClassesForElement("th")}
+    >
+      {headerDefinition.name}
+      <section
+        class={getClassesForElement("dropdown")}
+        style={dropDownVisible === headerDefinition
+          ? "display: block;"
+          : "display: none"}
+      >
+        {#if headerDefinition.sortable}
+          <SortFilter {headerDefinition} on:sort />
+        {/if}
+        {#if headerDefinition.filterable}
+          <TextFilter {headerDefinition} on:filter />
+        {/if}
+      </section>
+    </th>
+  {/each}
+</tr>
 
 <style>
   th {
     position: relative;
     display: inline-block;
   }
-
   section {
     position: absolute;
     background-color: #f9f9f9;
diff --git a/src/Interfaces/ColumnDefinition.ts b/src/Interfaces/ColumnDefinition.ts
deleted file mode 100644
index e1775a4..0000000
--- a/src/Interfaces/ColumnDefinition.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface ColumnDefinition {
-    editable: boolean;
-    value: string;
-}
\ No newline at end of file
diff --git a/src/Interfaces/HeaderDefinition.ts b/src/Interfaces/HeaderDefinition.ts
index 05c0d88..9885824 100644
--- a/src/Interfaces/HeaderDefinition.ts
+++ b/src/Interfaces/HeaderDefinition.ts
@@ -1,5 +1,7 @@
 export interface HeaderDefinition {
-    text: string;
-    sortable: boolean;
-    filterable: boolean;
-  }
\ No newline at end of file
+  prop: string;
+  name: string;
+  sortable: boolean;
+  filterable: boolean;
+  editable: boolean;
+}
\ No newline at end of file
diff --git a/src/Interfaces/RowDefinition.ts b/src/Interfaces/RowDefinition.ts
deleted file mode 100644
index d355e59..0000000
--- a/src/Interfaces/RowDefinition.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { ColumnDefinition } from "./ColumnDefinition";
-export interface RowDefinition {
-    columns: ColumnDefinition[];
-}
\ No newline at end of file
diff --git a/src/Row.svelte b/src/Row.svelte
index 2cbbed4..7e94db2 100644
--- a/src/Row.svelte
+++ b/src/Row.svelte
@@ -1,12 +1,3 @@
 <script lang="ts">
-  import Column from "./Column.svelte";
-  import { RowDefinition } from "./Interfaces/RowDefinition";
-
-  export let rowDefinition: RowDefinition;
-</script>
-
-<tr>
-  {#each rowDefinition.columns as column}
-    <Column on:edit columnDefinition={column} />
-  {/each}
-</tr>
+    
+</script>
\ No newline at end of file
diff --git a/src/Table.svelte b/src/Table.svelte
index 239b923..03c9898 100644
--- a/src/Table.svelte
+++ b/src/Table.svelte
@@ -1,24 +1,31 @@
 <script lang="ts">
-  import Row from "./Row.svelte";
-  import Header from "./Header.svelte";
-  import { HeaderDefinition } from "./Interfaces/HeaderDefinition";
-  import { RowDefinition } from "./Interfaces/RowDefinition";
-
-  export let headers: HeaderDefinition[] = [];
-  export let data: RowDefinition[] = [];
+  import { getContext, setContext } from "svelte";
+  import { optionsKey } from "./context";
+  export let options: any = undefined;
+  setContext(optionsKey, {
+    options,
+    getClassesForElement: (element: string) => {
+      if (!Object.keys(options).includes(element)) {
+        return "default_style";
+      }
+      return options[element].join(" ");
+    }
+  });
+  const { getClassesForElement } = getContext(optionsKey);
 </script>
 
-<table>
-  <thead>
-    <tr>
-      {#each headers as header}
-        <Header on:sort on:filter headerDefinition={header} />
-      {/each}
-    </tr>
+<table class={getClassesForElement("table")}>
+  <thead class={getClassesForElement("thead")}>
+    <slot name="head" />
   </thead>
-  <tbody>
-    {#each data as row}
-      <Row on:edit rowDefinition={row} />
-    {/each}
+  <tbody class={getClassesForElement("tbody")}>
+    <slot name="body" />
   </tbody>
 </table>
+
+<style>
+  .default_style {
+    border: 1px solid black;
+    padding: .5rem;
+  }
+</style>
\ No newline at end of file
diff --git a/src/context.ts b/src/context.ts
new file mode 100644
index 0000000..3ffb57d
--- /dev/null
+++ b/src/context.ts
@@ -0,0 +1 @@
+export const optionsKey = {};
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index a6e9029..5854754 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,3 @@
-export { RowDefinitionFactory } from "./Factory/RowDefinitionFactory";
-export type { RowDefinition } from "./Interfaces/RowDefinition";
-export type { ColumnDefinition } from "./Interfaces/ColumnDefinition";
 export type { HeaderDefinition } from "./Interfaces/HeaderDefinition";
 export type { EditEvent } from "./Interfaces/Events/EditEvent"; 
 export type { FilterEvent } from "./Interfaces/Events/FilterEvent"; 
diff --git a/src/stores.ts b/src/stores.ts
new file mode 100644
index 0000000..1de0c59
--- /dev/null
+++ b/src/stores.ts
@@ -0,0 +1,4 @@
+import { Writable, writable } from "svelte/store";
+import { HeaderDefinition } from "./Interfaces/HeaderDefinition";
+
+export const headerDefinitions: Writable<Array<HeaderDefinition>> = writable(new Array<HeaderDefinition>());
\ No newline at end of file

From 6defccdacf311be9f6ca99121d915af69fa01ce2 Mon Sep 17 00:00:00 2001
From: Daniel Schischkin <daniel@schischkin.info>
Date: Tue, 9 Feb 2021 04:59:22 +0100
Subject: [PATCH 3/5] Add Row.svelte

---
 src/Interfaces/Events/EditEvent.ts |  4 +--
 src/Interfaces/RowDefinition.ts    |  5 +++
 src/Row.svelte                     | 51 ++++++++++++++++++++++++++++--
 3 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/Interfaces/RowDefinition.ts

diff --git a/src/Interfaces/Events/EditEvent.ts b/src/Interfaces/Events/EditEvent.ts
index 043ba3a..594b6a8 100644
--- a/src/Interfaces/Events/EditEvent.ts
+++ b/src/Interfaces/Events/EditEvent.ts
@@ -1,7 +1,7 @@
-import { ColumnDefinition } from "../ColumnDefinition";
+import { RowDefinition } from "../RowDefinition";
 
 export interface EditEvent {
-    columnDefinition: ColumnDefinition;
+    rowDefinition: RowDefinition;
     value: string;
     rawEvent: Event;
 }
\ No newline at end of file
diff --git a/src/Interfaces/RowDefinition.ts b/src/Interfaces/RowDefinition.ts
new file mode 100644
index 0000000..6f030a0
--- /dev/null
+++ b/src/Interfaces/RowDefinition.ts
@@ -0,0 +1,5 @@
+export interface RowDefinition {
+    prop: string;
+    value: string;
+    editable: boolean;
+}
\ No newline at end of file
diff --git a/src/Row.svelte b/src/Row.svelte
index 7e94db2..443a5d2 100644
--- a/src/Row.svelte
+++ b/src/Row.svelte
@@ -1,3 +1,50 @@
 <script lang="ts">
-    
-</script>
\ No newline at end of file
+  import { onMount } from "svelte";
+import { HeaderDefinition } from "./Interfaces/HeaderDefinition";
+import { RowDefinition } from "./Interfaces/RowDefinition";
+  import { headerDefinitions } from "./stores";
+  import { createEventDispatcher } from "svelte";
+  export let row: Object;
+  const dispatch = createEventDispatcher();
+  let tableData: RowDefinition[];
+  let editActive: boolean = false;
+
+  headerDefinitions.subscribe((headerDefinitionsValue: HeaderDefinition[]) => {
+      tableData = headerDefinitionsValue.map((headerDefinition: HeaderDefinition) => {
+        if (!Object.keys(row).includes(headerDefinition.prop)) {
+            return;
+        }
+        return {
+              prop: headerDefinition.prop,
+              value: row[headerDefinition.prop],
+              editable: headerDefinition.editable
+          };
+      });
+  });
+
+  const triggerEditEvent = (event: KeyboardEvent, rowDefinition: RowDefinition) => {
+    if (event.code != "Enter") {
+      return;
+    }
+    editActive = false;
+    dispatch("edit", { rowDefinition, rowDefinition.value, rawEvent: event });
+  };
+</script>
+
+<tr>
+  {#each tableData as rowDefinition}
+    {#if $$slots[rowDefinition.prop]}
+      <slot name={rowDefinition.prop} {rowDefinition} />
+    {:else}
+      <td
+        on:click={() => (rowDefinition.editable ? (editActive = true) : null)}
+      >
+        {#if rowDefinition.editable && editActive}
+          <textarea on:keydown={(event) => triggerEditEvent(event, rowDefinition)} />
+        {:else}
+          {rowDefinition.value}
+        {/if}
+      </td>
+    {/if}
+  {/each}
+</tr>

From 60a32a7a82fb8fb01353e2c6548cb78b9c24b712 Mon Sep 17 00:00:00 2001
From: Daniel Schischkin <daniel@schischkin.info>
Date: Tue, 9 Feb 2021 04:59:49 +0100
Subject: [PATCH 4/5] Add Row.svelte

---
 src/Row.svelte | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/Row.svelte b/src/Row.svelte
index 443a5d2..52519e3 100644
--- a/src/Row.svelte
+++ b/src/Row.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
-import { HeaderDefinition } from "./Interfaces/HeaderDefinition";
-import { RowDefinition } from "./Interfaces/RowDefinition";
+  import { HeaderDefinition } from "./Interfaces/HeaderDefinition";
+  import { RowDefinition } from "./Interfaces/RowDefinition";
   import { headerDefinitions } from "./stores";
   import { createEventDispatcher } from "svelte";
   export let row: Object;
@@ -10,24 +10,29 @@ import { RowDefinition } from "./Interfaces/RowDefinition";
   let editActive: boolean = false;
 
   headerDefinitions.subscribe((headerDefinitionsValue: HeaderDefinition[]) => {
-      tableData = headerDefinitionsValue.map((headerDefinition: HeaderDefinition) => {
+    tableData = headerDefinitionsValue.map(
+      (headerDefinition: HeaderDefinition) => {
         if (!Object.keys(row).includes(headerDefinition.prop)) {
-            return;
+          return;
         }
         return {
-              prop: headerDefinition.prop,
-              value: row[headerDefinition.prop],
-              editable: headerDefinition.editable
-          };
-      });
+          prop: headerDefinition.prop,
+          value: row[headerDefinition.prop],
+          editable: headerDefinition.editable,
+        };
+      }
+    );
   });
 
-  const triggerEditEvent = (event: KeyboardEvent, rowDefinition: RowDefinition) => {
+  const triggerEditEvent = (
+    event: KeyboardEvent,
+    rowDefinition: RowDefinition
+  ) => {
     if (event.code != "Enter") {
       return;
     }
     editActive = false;
-    dispatch("edit", { rowDefinition, rowDefinition.value, rawEvent: event });
+    dispatch("edit", { rowDefinition, rawEvent: event });
   };
 </script>
 
@@ -40,7 +45,9 @@ import { RowDefinition } from "./Interfaces/RowDefinition";
         on:click={() => (rowDefinition.editable ? (editActive = true) : null)}
       >
         {#if rowDefinition.editable && editActive}
-          <textarea on:keydown={(event) => triggerEditEvent(event, rowDefinition)} />
+          <textarea
+            on:keydown={(event) => triggerEditEvent(event, rowDefinition)}
+          />
         {:else}
           {rowDefinition.value}
         {/if}

From 747c1f47aee25cba025c55056cec82b62ff739fc Mon Sep 17 00:00:00 2001
From: Daniel Schischkin | Surplex <daniel.schischkin@surplex.com>
Date: Tue, 9 Feb 2021 10:44:12 +0100
Subject: [PATCH 5/5] Remove dynamic slot generation

---
 src/Row.svelte | 2 +-
 src/index.ts   | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Row.svelte b/src/Row.svelte
index 52519e3..6adf531 100644
--- a/src/Row.svelte
+++ b/src/Row.svelte
@@ -39,7 +39,7 @@
 <tr>
   {#each tableData as rowDefinition}
     {#if $$slots[rowDefinition.prop]}
-      <slot name={rowDefinition.prop} {rowDefinition} />
+      <!-- TODO: Implement dynamic slots or another solution -->
     {:else}
       <td
         on:click={() => (rowDefinition.editable ? (editActive = true) : null)}
diff --git a/src/index.ts b/src/index.ts
index 5854754..ec12fda 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,10 @@
 export type { HeaderDefinition } from "./Interfaces/HeaderDefinition";
+export type { RowDefinition } from "./Interfaces/RowDefinition";
 export type { EditEvent } from "./Interfaces/Events/EditEvent"; 
 export type { FilterEvent } from "./Interfaces/Events/FilterEvent"; 
 export type { Sort, SortEvent } from "./Interfaces/Events/SortEvent";
 export { default as Table } from "./Table.svelte";
 export { default as Row } from "./Row.svelte";
-export { default as Column } from "./Column.svelte";
-export { default as Header } from "./Header.svelte";
\ No newline at end of file
+export { default as Header } from "./Header.svelte";
+export { default as SortFilter } from "./Filters/SortFilter.svelte";
+export { default as TextFilter } from "./Filters/TextFilter.svelte";
\ No newline at end of file