Initial Implementation Of KTable Component

CHANGELOG.md

@@ -37,7 +37,6 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#650]: https://github.com/learningequality/kolibri-design-system/pull/650
 
-
 - [#723]
   - **Description:** Updates $core-time value from 0.25s to 0.15s
   - **Products impact:** User experience - faster transitions
@@ -72,6 +71,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#728]: https://github.com/learningequality/kolibri-design-system/pull/728
 
+
 - [#738]
   - **Description:** Bump KDS version to 5.0.0-rc2.
   - **Products impact:** -.
@@ -94,6 +94,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [705]: https://github.com/learningequality/kolibri-design-system/pull/705
 
+
 - [719]
   - **Description:** Removes KResponsiveWindowMixin.
   - **Products impact:** removed API.
@@ -105,6 +106,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [719]: https://github.com/learningequality/kolibri-design-system/pull/719
 
+
 - [#718]
   - **Description:** This pull request resolves failing `KDateCalendar` component tests that occurred on the last day of the month in open pull requests by setting dates manually in the tests. Additionally, the `KDateCalendar` is updated to show the month of the `lastAllowedDate` property.
   - **Products impact:** none

docs/pages/ktable.vue

@@ -0,0 +1,153 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        The <code>KTable</code> component is an accessible and customizable table component designed to handle a variety of data presentation needs. The component is suitable for both simple and complex data tables. It offers:
+        <ul>
+          <li>Offers built-in sorting by default</li>
+          <li>Integrates with already sorted data</li>
+          <li>Keyboard navigation</li>
+          <li>Dynamic column resizing</li>
+          <li>Sticky headers</li>
+        </ul>
+      </p>
+    </DocsPageSection>
+    <DocsPageSection title="Usage" anchor="#usage">
+      <!--Non-Sortable Table-->
+      <h3>Table without sorting functionality</h3>
+      <p>
+        This is an example to show how <code>KTable</code> can be used without any sorting functionality, as a simple table. Use of slots is optional.
+      </p>
+      <!-- eslint-disable -->
+      <DocsShowCode language="html">
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Non Sortable Table"
+        >
+
+          <template #header="{ header, index }">
+            <span>{ header.label } (Backend)</span>
+          </template>
+          <template #cell="{ content, rowIndex, colIndex }">
+            <span v-if="colIndex === 2">{ content } (City)</span>
+            <span v-else>{ content }</span>
+          </template>
+        </KTable>
+
+      </DocsShowCode>
+
+  <DocsShowCode language="javascript">
+    data() {
+      return {
+        headers: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'numeric' },
+          { label: 'City', dataType: 'string' },
+        ],
+        rows: [
+        ['John Doe', 28, 'New York'],
+          ['Jane Smith', 34, 'Los Angeles'],
+          ['Samuel Green', 22, 'Chicago'],
+          ['Alice Johnson', 30, 'Houston'],
+          ['Michael Brown', 45, 'Phoenix'],
+          ['Emily Davis', 27, 'Philadelphia'],
+        ]
+      };
+    },
+  </DocsShowCode>
+
+      <DocsShow block>
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Non-sortable table"
+        >
+          <template #header="{ header, index }">
+            <span>{{ header.label }} (Backend)</span>
+          </template>
+          <template #cell="{ content, rowIndex, colIndex }">
+            <span v-if="colIndex === 2">{{ content }} (City)</span>
+            <span v-else>{{ content }}</span>
+          </template>
+        </KTable>
+      </DocsShow>
+       <!-- eslint-enable -->
+      <!-- Frontend Sorting Example-->
+      <h3>Table with Default Sorting</h3>
+      <p>
+        The <code>KTable</code> can be used with default sorting functionality, allowing you to sort data on the client side without the need for server requests. There are 4 permissible data types - <code>string</code>,<code>numeric</code>,<code>date</code> and <code>others</code>. Columns declared with <code>others</code> data type are not sortable. This example demonstrates a table with default sorting enabled.
+      </p>
+      <!-- eslint-disable -->
+      <DocsShowCode language="html">
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Table with built-in sorting"
+          sortable
+        />
+
+      </DocsShowCode>
+
+  <DocsShowCode language="javascript">
+    data() {
+      return {
+        headers: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'numeric' },
+          { label: 'City', dataType: 'string' },
+        ],
+        rows: [
+        ['John Doe', 28, 'New York'],
+          ['Jane Smith', 34, 'Los Angeles'],
+          ['Samuel Green', 22, 'Chicago'],
+          ['Alice Johnson', 30, 'Houston'],
+          ['Michael Brown', 45, 'Phoenix'],
+          ['Emily Davis', 27, 'Philadelphia'],
+        ]
+      };
+    },
+  </DocsShowCode>
+      <DocsShow block>
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Local Sorting Table"
+          sortable
+        />
+          <!-- eslint-enable -->
+      </DocsShow>
+
+    </DocsPageSection>
+
+
+  </DocsPageTemplate>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'DocsKTable',
+    data() {
+      return {
+        headers: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'numeric' },
+          { label: 'City', dataType: 'string' },
+        ],
+        rows: [
+          ['John Doe', 28, 'New York'],
+          ['Jane Smith', 34, 'Los Angeles'],
+          ['Samuel Green', 22, 'Chicago'],
+          ['Alice Johnson', 30, 'Houston'],
+          ['Michael Brown', 45, 'Phoenix'],
+          ['Emily Davis', 27, 'Philadelphia'],
+        ],
+      };
+    },
+  };
+
+</script>