Skip to content

Commit

Permalink
feat: Data Table Components (#173)
Browse files Browse the repository at this point in the history 
* Data Table Components

* svelte Data Table Components

* vue Data Table Components

* In Table Components changed props 'component'

* dividers added with hairline/border, Within card added + props left

* added class text-right in Demos , deleted "left" props

* TS added + border in material moved to TableRow

* Deleted props component from Table-related components

* Added back deleted types

* deleted component props in types
  • Loading branch information
@Lexandrina90
Lexandrina90 authored Sep 20, 2023
1 parent 85a29e9 commit 643973d
Show file tree
Hide file tree
Showing 36 changed files with 1,158 additions and 0 deletions.
130 changes: 130 additions & 0 deletions kitchen-sink/react/pages/DataTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import React from 'react';
import {
Page,
Navbar,
NavbarBackLink,
BlockTitle,
Card,
Table,
TableHead,
TableBody,
TableCell,
TableRow,
} from 'konsta/react';

export default function DataTablePage() {
const isPreview = document.location.href.includes('examplePreview');
return (
<Page>
<Navbar
title="Data Table"
left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
/>
<BlockTitle>Plain table</BlockTitle>
<div className="block overflow-x-auto mt-8">
<Table>
<TableHead>
<TableRow header>
<TableCell header>Dessert (100g serving)</TableCell>
<TableCell header className="text-right">
Calories
</TableCell>
<TableCell header className="text-right">
Fat (g)
</TableCell>
<TableCell header className="text-right">
Carbs
</TableCell>
<TableCell header className="text-right">
Protein (g)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Frozen yogurt</TableCell>
<TableCell className="text-right">159</TableCell>
<TableCell className="text-right">6.0</TableCell>
<TableCell className="text-right">24</TableCell>
<TableCell className="text-right">4.0</TableCell>
</TableRow>
<TableRow>
<TableCell>Ice cream sandwich</TableCell>
<TableCell className="text-right">237</TableCell>
<TableCell className="text-right">9.0</TableCell>
<TableCell className="text-right">37</TableCell>
<TableCell className="text-right">4.4</TableCell>
</TableRow>
<TableRow>
<TableCell>Eclair</TableCell>
<TableCell className="text-right">262</TableCell>
<TableCell className="text-right">16.0</TableCell>
<TableCell className="text-right">24</TableCell>
<TableCell className="text-right">6.0</TableCell>
</TableRow>
<TableRow>
<TableCell>Cupcake</TableCell>
<TableCell className="text-right">305</TableCell>
<TableCell className="text-right">3.7</TableCell>
<TableCell className="text-right">67</TableCell>
<TableCell className="text-right">4.3</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
<BlockTitle>Within card</BlockTitle>
<Card className="block overflow-x-auto mt-8" contentWrap={false}>
<Table>
<TableHead>
<TableRow header>
<TableCell header>Dessert (100g serving)</TableCell>
<TableCell header className="text-right">
Calories
</TableCell>
<TableCell header className="text-right">
Fat (g)
</TableCell>
<TableCell header className="text-right">
Carbs
</TableCell>
<TableCell header className="text-right">
Protein (g)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Frozen yogurt</TableCell>
<TableCell className="text-right">159</TableCell>
<TableCell className="text-right">6.0</TableCell>
<TableCell className="text-right">24</TableCell>
<TableCell className="text-right">4.0</TableCell>
</TableRow>
<TableRow>
<TableCell>Ice cream sandwich</TableCell>
<TableCell className="text-right">237</TableCell>
<TableCell className="text-right">9.0</TableCell>
<TableCell className="text-right">37</TableCell>
<TableCell className="text-right">4.4</TableCell>
</TableRow>
<TableRow>
<TableCell>Eclair</TableCell>
<TableCell className="text-right">262</TableCell>
<TableCell className="text-right">16.0</TableCell>
<TableCell className="text-right">24</TableCell>
<TableCell className="text-right">6.0</TableCell>
</TableRow>
<TableRow>
<TableCell>Cupcake</TableCell>
<TableCell className="text-right">305</TableCell>
<TableCell className="text-right">3.7</TableCell>
<TableCell className="text-right">67</TableCell>
<TableCell className="text-right">4.3</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
</Page>
);
}
DataTablePage.displayName = 'DataTablePage';
2 changes: 2 additions & 0 deletions kitchen-sink/react/routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Checkbox from './pages/Checkbox.jsx';
import Chips from './pages/Chips.jsx';
import ContactsList from './pages/ContactsList.jsx';
import ContentBlock from './pages/ContentBlock.jsx';
import DataTable from './pages/DataTable.jsx';
import Dialog from './pages/Dialog.jsx';
import Fab from './pages/Fab.jsx';
import FormInputs from './pages/FormInputs.jsx';
Expand Down Expand Up @@ -43,6 +44,7 @@ const routes = [
Chips,
ContactsList,
ContentBlock,
DataTable,
Dialog,
Fab,
FormInputs,
Expand Down
129 changes: 129 additions & 0 deletions kitchen-sink/svelte/pages/DataTable.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<script>
import {
Page,
Navbar,
NavbarBackLink,
BlockTitle,
Card,
Table,
TableHead,
TableBody,
TableCell,
TableRow,
} from 'konsta/svelte';
const isPreview = document.location.href.includes('examplePreview');
</script>
<Page>
<Navbar title="Data Table">
<svelte:fragment slot="left">
{#if !isPreview}
<NavbarBackLink onClick={() => history.back()} />
{/if}
</svelte:fragment>
</Navbar>
<BlockTitle>Plain table</BlockTitle>
<div class="block overflow-x-auto mt-8">
<Table>
<TableHead>
<TableRow header>
<TableCell header>Dessert (100g serving)</TableCell>
<TableCell header class="text-right">
Calories
</TableCell>
<TableCell header class="text-right">
Fat (g)
</TableCell>
<TableCell header class="text-right">
Carbs
</TableCell>
<TableCell header class="text-right">
Protein (g)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Frozen yogurt</TableCell>
<TableCell class="text-right">159</TableCell>
<TableCell class="text-right">6.0</TableCell>
<TableCell class="text-right">24</TableCell>
<TableCell class="text-right">4.0</TableCell>
</TableRow>
<TableRow>
<TableCell>Ice cream sandwich</TableCell>
<TableCell class="text-right">237</TableCell>
<TableCell class="text-right">9.0</TableCell>
<TableCell class="text-right">37</TableCell>
<TableCell class="text-right">4.4</TableCell>
</TableRow>
<TableRow>
<TableCell>Eclair</TableCell>
<TableCell class="text-right">262</TableCell>
<TableCell class="text-right">16.0</TableCell>
<TableCell class="text-right">24</TableCell>
<TableCell class="text-right">6.0</TableCell>
</TableRow>
<TableRow>
<TableCell>Cupcake</TableCell>
<TableCell class="text-right">305</TableCell>
<TableCell class="text-right">3.7</TableCell>
<TableCell class="text-right">67</TableCell>
<TableCell class="text-right">4.3</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
<BlockTitle>Within card</BlockTitle>
<Card class="block overflow-x-auto mt-8" contentWrap={false}>
<Table>
<TableHead>
<TableRow header>
<TableCell header>Dessert (100g serving)</TableCell>
<TableCell header class="text-right">
Calories
</TableCell>
<TableCell header class="text-right">
Fat (g)
</TableCell>
<TableCell header class="text-right">
Carbs
</TableCell>
<TableCell header class="text-right">
Protein (g)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Frozen yogurt</TableCell>
<TableCell class="text-right">159</TableCell>
<TableCell class="text-right">6.0</TableCell>
<TableCell class="text-right">24</TableCell>
<TableCell class="text-right">4.0</TableCell>
</TableRow>
<TableRow>
<TableCell>Ice cream sandwich</TableCell>
<TableCell class="text-right">237</TableCell>
<TableCell class="text-right">9.0</TableCell>
<TableCell class="text-right">37</TableCell>
<TableCell class="text-right">4.4</TableCell>
</TableRow>
<TableRow>
<TableCell>Eclair</TableCell>
<TableCell class="text-right">262</TableCell>
<TableCell class="text-right">16.0</TableCell>
<TableCell class="text-right">24</TableCell>
<TableCell class="text-right">6.0</TableCell>
</TableRow>
<TableRow>
<TableCell>Cupcake</TableCell>
<TableCell class="text-right">305</TableCell>
<TableCell class="text-right">3.7</TableCell>
<TableCell class="text-right">67</TableCell>
<TableCell class="text-right">4.3</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
</Page>
2 changes: 2 additions & 0 deletions kitchen-sink/svelte/routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Checkbox from './pages/Checkbox.svelte';
import Chips from './pages/Chips.svelte';
import ContactsList from './pages/ContactsList.svelte';
import ContentBlock from './pages/ContentBlock.svelte';
import DataTable from './pages/DataTable.svelte';
import Dialog from './pages/Dialog.svelte';
import Fab from './pages/Fab.svelte';
import FormInputs from './pages/FormInputs.svelte';
Expand Down Expand Up @@ -43,6 +44,7 @@ const pages = {
Chips,
ContactsList,
ContentBlock,
DataTable,
Dialog,
Fab,
FormInputs,
Expand Down
Loading

0 comments on commit 643973d

Please sign in to comment.