mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-01-20 20:01:25 +00:00
166 lines
23 KiB
JavaScript
166 lines
23 KiB
JavaScript
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as e,o as l}from"./app-BnOEODOX.js";const i={};function p(d,s){return l(),a("div",null,s[0]||(s[0]=[e(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><p>Display an array of data objects.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
|
<span class="line"><span> <ds-table :data="tableData"></span></span>
|
|
<span class="line"><span> </ds-table></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> tableData: [</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Rengar',</span></span>
|
|
<span class="line"><span> type: 'Jungler',</span></span>
|
|
<span class="line"><span> loves: 'Hide and seek'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Renekton',</span></span>
|
|
<span class="line"><span> type: 'Toplaner',</span></span>
|
|
<span class="line"><span> loves: 'Slice and dice'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Twitch',</span></span>
|
|
<span class="line"><span> type: 'ADC',</span></span>
|
|
<span class="line"><span> loves: 'Spray and pray'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Blitz',</span></span>
|
|
<span class="line"><span> type: 'Support',</span></span>
|
|
<span class="line"><span> loves: 'Hook you up'</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="specify-fields" tabindex="-1"><a class="header-anchor" href="#specify-fields"><span>Specify fields</span></a></h2><p>You can specify which fields to display</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
|
<span class="line"><span> <ds-table :data="tableData" :fields="tableFields"></span></span>
|
|
<span class="line"><span> </ds-table></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> tableFields: ['name', 'type'],</span></span>
|
|
<span class="line"><span> tableData: [</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Rengar',</span></span>
|
|
<span class="line"><span> type: 'Jungler',</span></span>
|
|
<span class="line"><span> loves: 'Hide and seek'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Renekton',</span></span>
|
|
<span class="line"><span> type: 'Toplaner',</span></span>
|
|
<span class="line"><span> loves: 'Slice and dice'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Twitch',</span></span>
|
|
<span class="line"><span> type: 'ADC',</span></span>
|
|
<span class="line"><span> loves: 'Spray and pray'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Blitz',</span></span>
|
|
<span class="line"><span> type: 'Support',</span></span>
|
|
<span class="line"><span> loves: 'Hook you up'</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="customize-header" tabindex="-1"><a class="header-anchor" href="#customize-header"><span>Customize header</span></a></h2><p>You can customize the header by setting fields as an object.</p><p>The value can be a string representing the fields label or an object with options.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
|
<span class="line"><span> <ds-table :data="tableData" :fields="tableFields"></span></span>
|
|
<span class="line"><span> </ds-table></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> tableFields: {</span></span>
|
|
<span class="line"><span> name: 'Hero',</span></span>
|
|
<span class="line"><span> type: {</span></span>
|
|
<span class="line"><span> label: 'Job',</span></span>
|
|
<span class="line"><span> width: '300px',</span></span>
|
|
<span class="line"><span> align: 'right'</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> tableData: [</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Rengar',</span></span>
|
|
<span class="line"><span> type: 'Jungler',</span></span>
|
|
<span class="line"><span> loves: 'Hide and seek'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Renekton',</span></span>
|
|
<span class="line"><span> type: 'Toplaner',</span></span>
|
|
<span class="line"><span> loves: 'Slice and dice'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Twitch',</span></span>
|
|
<span class="line"><span> type: 'ADC',</span></span>
|
|
<span class="line"><span> loves: 'Spray and pray'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Blitz',</span></span>
|
|
<span class="line"><span> type: 'Support',</span></span>
|
|
<span class="line"><span> loves: 'Hook you up'</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-columns" tabindex="-1"><a class="header-anchor" href="#custom-columns"><span>Custom columns</span></a></h2><p>You can define custom templates for columns and create columns that do not have a corresponding data attribute.</p><p>Via scoped slots you have access to the columns <code>row</code>, <code>index</code> and <code>col</code>.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
|
<span class="line"><span> <div></span></span>
|
|
<span class="line"><span> <ds-table :data="tableData" :fields="tableFields"></span></span>
|
|
<span class="line"><span> <template slot="loves" slot-scope="scope"></span></span>
|
|
<span class="line"><span> {{ scope.row.name }} loves {{ scope.row.loves }}</span></span>
|
|
<span class="line"><span> </template></span></span>
|
|
<span class="line"><span> <template slot="edit" slot-scope="scope"></span></span>
|
|
<span class="line"><span> <ds-button</span></span>
|
|
<span class="line"><span> size="small"</span></span>
|
|
<span class="line"><span> @click="deleteRow(scope.row)">delete</ds-button></span></span>
|
|
<span class="line"><span> </template></span></span>
|
|
<span class="line"><span> </ds-table></span></span>
|
|
<span class="line"><span> </div></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> tableFields: ['name', 'type', 'loves', 'edit'],</span></span>
|
|
<span class="line"><span> tableData: [</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Rengar',</span></span>
|
|
<span class="line"><span> type: 'Jungler',</span></span>
|
|
<span class="line"><span> loves: 'Hide and seek'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Renekton',</span></span>
|
|
<span class="line"><span> type: 'Toplaner',</span></span>
|
|
<span class="line"><span> loves: 'Slice and dice'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Twitch',</span></span>
|
|
<span class="line"><span> type: 'ADC',</span></span>
|
|
<span class="line"><span> loves: 'Spray and pray'</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> {</span></span>
|
|
<span class="line"><span> name: 'Blitz',</span></span>
|
|
<span class="line"><span> type: 'Support',</span></span>
|
|
<span class="line"><span> loves: 'Hook you up'</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> ]</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> methods: {</span></span>
|
|
<span class="line"><span> deleteRow(row) {</span></span>
|
|
<span class="line"><span> const index = this.tableData.indexOf(row)</span></span>
|
|
<span class="line"><span> if (index > -1) {</span></span>
|
|
<span class="line"><span> this.tableData.splice(index, 1)</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,14)]))}const t=n(i,[["render",p],["__file","demo.html.vue"]]),r=JSON.parse(`{"path":"/styleguide/src/system/components/data-display/Table/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Specify fields","slug":"specify-fields","link":"#specify-fields","children":[]},{"level":2,"title":"Customize header","slug":"customize-header","link":"#customize-header","children":[]},{"level":2,"title":"Custom columns","slug":"custom-columns","link":"#custom-columns","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.11,"words":333},"filePathRelative":"styleguide/src/system/components/data-display/Table/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Basic usage</h2>\\n<p>Display an array of data objects.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><template></span></span>\\n<span class=\\"line\\"><span> <ds-table :data=\\"tableData\\"></span></span>\\n<span class=\\"line\\"><span> </ds-table></span></span>\\n<span class=\\"line\\"><span></template></span></span>\\n<span class=\\"line\\"><span></span></span>\\n<span class=\\"line\\"><span><script></span></span>\\n<span class=\\"line\\"><span> export default {</span></span>\\n<span class=\\"line\\"><span> data() {</span></span>\\n<span class=\\"line\\"><span> return {</span></span>\\n<span class=\\"line\\"><span> tableData: [</span></span>\\n<span class=\\"line\\"><span> {</span></span>\\n<span class=\\"line\\"><span> name: 'Rengar',</span></span>\\n<span class=\\"line\\"><span> type: 'Jungler',</span></span>\\n<span class=\\"line\\"><span> loves: 'Hide and seek'</span></span>\\n<span class=\\"line\\"><span> },</span></span>\\n<span class=\\"line\\"><span> {</span></span>\\n<span class=\\"line\\"><span> name: 'Renekton',</span></span>\\n<span class=\\"line\\"><span> type: 'Toplaner',</span></span>\\n<span class=\\"line\\"><span> loves: 'Slice and dice'</span></span>\\n<span class=\\"line\\"><span> },</span></span>\\n<span class=\\"line\\"><span> {</span></span>\\n<span class=\\"line\\"><span> name: 'Twitch',</span></span>\\n<span class=\\"line\\"><span> type: 'ADC',</span></span>\\n<span class=\\"line\\"><span> loves: 'Spray and pray'</span></span>\\n<span class=\\"line\\"><span> },</span></span>\\n<span class=\\"line\\"><span> {</span></span>\\n<span class=\\"line\\"><span> name: 'Blitz',</span></span>\\n<span class=\\"line\\"><span> type: 'Support',</span></span>\\n<span class=\\"line\\"><span> loves: 'Hook you up'</span></span>\\n<span class=\\"line\\"><span> }</span></span>\\n<span class=\\"line\\"><span> ]</span></span>\\n<span class=\\"line\\"><span> }</span></span>\\n<span class=\\"line\\"><span> }</span></span>\\n<span class=\\"line\\"><span> }</span></span>\\n<span class=\\"line\\"><span></script></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}`);export{t as comp,r as data};
|