Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated KTable Documentation #780

Merged
merged 2 commits into from
Sep 24, 2024
Merged

Updated KTable Documentation #780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
649e0eb
updated documentation
BabyElias Sep 15, 2024
b4bce43
fixed z-indices
BabyElias Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 140 additions & 23 deletions docs/pages/ktable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,15 @@
<!--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.
This is an example to show how <code>KTable</code> can be used without any sorting functionality, as a simple table.
</p>
<!-- eslint-disable -->
<DocsShowCode language="html">
<KTable
:headers="headers"
:rows="rows"
caption="Non Sortable Table"
>

<template #header="{ header, colIndex }">
<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>

Expand All @@ -47,7 +38,7 @@
{ label: 'City', dataType: 'string' },
],
rows: [
['John Doe', 28, 'New York'],
['John Doe', 28, 'New York'],
['Jane Smith', 34, 'Los Angeles'],
['Samuel Green', 22, 'Chicago'],
['Alice Johnson', 30, 'Houston'],
Expand All @@ -63,15 +54,7 @@
:headers="headers"
:rows="rows"
caption="Non-sortable table"
>
<template #header="{ header, colIndex }">
<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>

<!-- Frontend Sorting Example-->
Expand Down Expand Up @@ -99,7 +82,7 @@
{ label: 'City', dataType: 'string' },
],
rows: [
['John Doe', 28, 'New York'],
['John Doe', 28, 'New York'],
['Jane Smith', 34, 'Los Angeles'],
['Samuel Green', 22, 'Chicago'],
['Alice Johnson', 30, 'Houston'],
Expand All @@ -113,11 +96,119 @@
<KTable
:headers="headers"
:rows="rows"
caption="Local Sorting Table"
caption="In-Built Sorting Table"
sortable
/>
<!-- eslint-enable -->
</DocsShow>
<!--Table showing use of slots-->
<h3>Table showing use of slots</h3>
<p>
This is an example to show how slots can be used in <code>KTable</code>. The table currently provides slots for <code>header</code> and <code>cell</code> which can be used to customize the table header and cell content respectively.
</p>
<!-- eslint-disable -->
<DocsShowCode language="html">
<KTable
:headers="slotHeaders"
:rows="slotRows"
caption="Table showing use of slots"
sortable
>
<template #header="{ header, colindex }">
<span>{ header.label } (Local)</span>
</template>
<template #cell="{ content, rowIndex, colIndex }">
<span v-if="colIndex === 1">{ content } years old</span>
<span v-else-if="colIndex === 4"><KButton>Test</KButton></span>
<span v-else>{ content }</span>
</template>
</KTable>

</DocsShowCode>

<DocsShowCode language="javascript">
data() {
return {
slotHeaders: [
{ label: 'Name', dataType: 'string' },
{ label: 'Age', dataType: 'number' },
{ label: 'City', dataType: 'string' },
{ label: 'Joined', dataType: 'date' },
{ label: 'Misc', dataType: 'undefined' },
],
slotRows: [
['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
],
};
},
</DocsShowCode>

<DocsShow block>
<KTable
:headers="slotHeaders"
:rows="slotRows"
caption="Table showing use of slots"
sortable
>
<template #header="{ header, colindex }">
<span>{{ header.label }} (Local)</span>
</template>
<template #cell="{ content, rowIndex, colIndex }">
<span v-if="colIndex === 1">{{ content }} years old</span>
<span v-else-if="colIndex === 4"><KButton>Test</KButton></span>
<span v-else>{{ content }}</span>
</template>
</KTable>
</DocsShow>
<!-- eslint-enable -->
<!--Table with custom column widths-->
<h3>Table with custom column widths</h3>
<p>
This is an example to show how <code>KTable</code> can be used with custom column widths. The column widths are defined in the <code>headers</code> prop. The <code>width</code> property is used to define the overall width of the column. The <code>minWidth</code> defines the minimum width of column, below which the column will not shrink.
</p>
<!-- eslint-disable -->
<DocsShowCode language="html">
<KTable
:headers="headersWithCustomWidths"
:rows="customRows"
caption="Table showing columns with custom widths"
sortable
/>

</DocsShowCode>

<DocsShowCode language="javascript">
data() {
return {
headersWithCustomWidths: [
{ label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
{ label: 'Age', dataType: 'number', minWidth: '100px', width: '33%' },
{ label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
{ label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
{ label: 'Misc', dataType: 'undefined', minWidth: '100px', width: '20%' },
],
customRows: [
['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
],
};
},
</DocsShowCode>

<DocsShow block>
<KTable
:headers="headersWithCustomWidths"
:rows="customRows"
caption="Table showing columns with custom widths"
sortable
/>
</DocsShow>
<!-- eslint-enable -->

</DocsPageSection>

Expand Down Expand Up @@ -146,6 +237,32 @@
['Michael Brown', 45, 'Phoenix'],
['Emily Davis', 27, 'Philadelphia'],
],
slotHeaders: [
{ label: 'Name', dataType: 'string' },
{ label: 'Age', dataType: 'number' },
{ label: 'City', dataType: 'string' },
{ label: 'Joined', dataType: 'date' },
{ label: 'Misc', dataType: 'undefined' },
],
slotRows: [
['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
],
headersWithCustomWidths: [
{ label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
{ label: 'Age', dataType: 'number', minWidth: '100px', width: '33%' },
{ label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
{ label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
{ label: 'Misc', dataType: 'undefined', minWidth: '100px', width: '20%' },
],
customRows: [
['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
],
};
},
};
Expand Down
6 changes: 3 additions & 3 deletions lib/KTable/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -547,18 +547,18 @@ td {
.sticky-header {
position: sticky;
top: 0;
z-index: 3;
z-index: 2;
}

.sticky-column {
position: sticky;
left: 0;
z-index: 2;
z-index: 1;
}

th.sticky-header.sticky-column,
td.sticky-header.sticky-column {
z-index: 4;
z-index: 3;
}
.sortable {
cursor: pointer;
Expand Down