#38 : Customize table, update docs

src/docs/Carousel.svx

@@ -208,8 +208,6 @@ Import component
 
 # Props
 
-<div class="table-wrapper">
-
 | Prop                 | Type       | Default         | Description                                   | 
 |----------------------|------------|-----------------|-----------------------------------------------|
 | `arrows`             | `boolean`  | `true`          | Enable Next/Prev arrows                       |
@@ -223,8 +221,6 @@ Import component
 | `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
 | `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
 
-</div>
-
 <Divider />
 
 # Events
@@ -232,14 +228,10 @@ Import component
 ## `pageChange`
 Is dispatched on page change
 
-<div class="table-wrapper">
-
 | Payload field      | Type        | Description                           | 
 |--------------------|-------------|---------------------------------------|
 | `event.detail`     | `number`    | Current page index                    |
 
-</div>
-
 ```jsx
 <Carousel
   on:pageChange={
@@ -259,15 +251,11 @@ They are used for customizing prev and next buttons.
 
 Slot props:
 
-<div class="table-wrapper">
-
 | Prop               | Type        | Description                           | 
 |--------------------|-------------|---------------------------------------|
 | `showPrevPage`     | `function`  | Call it to switch to the previos page |
 | `showNextPage`     | `function`  | Call it to switch to the next page    |
 
-</div>
-
 ```jsx
 <Carousel
   let:showPrevPage
@@ -288,7 +276,6 @@ Slot props:
 This slot is used for customizing dots appearance.
 
 Slot props:
-<div class="table-wrapper">
 
 | Prop                | Type         | Description                                  | 
 |---------------------|----------  --|----------------------------------------------|
@@ -296,8 +283,6 @@ Slot props:
 | `pagesCount`        | `number`     | Total pages amount                           |
 | `showPage`          | `function`   | Takes index as page to be shown              |
 
-</div>
-
 ```jsx
 <Carousel
   let:currentPageIndex
@@ -317,14 +302,10 @@ This slot takes content for the carousel.
 
 Slot props:
 
-<div class="table-wrapper">
-
 | Prop              | Type       | Description                                                          | 
 |-------------------|------------|----------------------------------------------------------------------|
 | `loaded`          | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
 
-</div>
-
 ```jsx
 <Carousel
   let:loaded
@@ -345,15 +326,11 @@ Navigates to a page by index
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `pageIndex`        | `number`    |         | Page number                           |
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -376,14 +353,10 @@ Navigates to the previous page
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -406,14 +379,10 @@ Navigates to the next page
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -446,24 +415,6 @@ Arguments:
     -webkit-user-drag: none;
   }
 
-  /* table */
-  .table-wrapper {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-  table {
-    border-collapse: collapse;
-  }
-  tr {
-    border-bottom: 2px solid #009800;
-  }
-  td {
-    padding: 2px 10px;
-  }
-  th {
-    padding: 5px 10px;
-  }
-
   /* custom arrows */
   .custom-arrow {
     width: 20px;

src/docs/Layouts/Main.svelte

@@ -1,3 +1,16 @@
+<script context="module">
+  import Table from './custom/Table.svelte';
+  import Th from './custom/Th.svelte';
+  import Tr from './custom/Tr.svelte';
+  import Td from './custom/Td.svelte';
+  export {
+    Table as table,
+    Th as th,
+    Tr as tr,
+    Td as td
+  };
+</script>
+
 <script>
   const links = [{
     title: 'github',

src/docs/Layouts/custom/Table.svelte

@@ -0,0 +1,15 @@
+<div class="table-wrapper">
+  <table>
+    <slot></slot>
+  </table>
+</div>
+
+<style>
+  .table-wrapper {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+  table {
+    border-collapse: collapse;
+  }
+</style>

src/docs/Layouts/custom/Td.svelte

@@ -0,0 +1,9 @@
+<td>
+  <slot></slot>
+</td>
+
+<style>
+  td {
+    padding: 2px 10px;
+  }
+</style>

src/docs/Layouts/custom/Th.svelte

@@ -0,0 +1,9 @@
+<th>
+  <slot></slot>
+</th>
+
+<style>
+  th {
+    padding: 5px 10px;
+  }
+</style>

src/docs/Layouts/custom/Tr.svelte

@@ -0,0 +1,9 @@
+<tr>
+  <slot></slot>
+</tr>
+
+<style>
+  tr {
+    border-bottom: 2px solid #009800;
+  }
+</style>