New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

responsive-table-dl

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

responsive-table-dl - npm Package Compare versions

Comparing version

1.0.11
to
1.0.12

2

package.json
{
"author": "josejuan81",
"name": "responsive-table-dl",
"version": "1.0.11",
"version": "1.0.12",
"main": "lib/responsive-table-dl.umd.js",

@@ -6,0 +6,0 @@ "module": "lib/responsive-table-dl.esm.js",

105

README.md

@@ -13,2 +13,3 @@ # Tabla Web y Móvil

[live example in codePen](https://codepen.io/JOSEJUAN/pen/abvGNKx?editors=1111)
<img src="https://japi-static.s3.amazonaws.com/japi-sales-error/Captura-de-pantalla-2020-01-14-a-la%28s%29-12.00.47.png">

@@ -34,3 +35,3 @@ <img src="https://japi-static.s3.amazonaws.com/japi-sales-error/Captura-de-pantalla-2020-01-14-a-la%28s%29-12.01.10.png">

```js
import ResponsiveTable from 'responsive-table-dl';
import responsive-table-dl from 'responsive-table-dl';
```

@@ -43,3 +44,4 @@

<template>
<ResponsiveTable
<div id="app" data-cy="app">
<responsive-table-dl
class="responsive-table"

@@ -50,16 +52,17 @@ :break-point="550"

>
<template v-slot:caption><span>Este es el slot del caption</span></template>
<template v-slot:row="{ row, index }">
<td class="cell1">{{row.name}}</td>
<td class="cell2">{{row.lastName}}</td>
<td class="cell3">{{row.age}}</td>
<td class="cell4">{{row.gender}}</td>
<td class="actions">Acciones</td>
</template>
<template v-slot:footer>
<tr>
<td colspan="5">Este es el slot del footer</td>
</tr>
</template>
</ResponsiveTable>
<template v-slot:caption><span>Este es el slot del caption</span></template>
<template v-slot:row="{ row, index }">
<td class="cell1">{{row.name}}</td>
<td class="cell2">{{row.lastName}}</td>
<td class="cell3">{{row.age}}</td>
<td class="cell4">{{row.gender}}</td>
<td class="actions">Acciones</td>
</template>
<template v-slot:footer>
<tr>
<td colspan="5">Este es el slot del footer</td>
</tr>
</template>
</responsive-table-dl>
</div>
</template>

@@ -69,3 +72,3 @@ ```

<script>
import ResponsiveTable from 'responsive-table-dl';
import responsiveTableDl from '@/components/responsive-table-dl.vue';

@@ -100,6 +103,7 @@ function data() {

}
export default {
name: 'some-component',
name: 'app',
components: {
ResponsiveTable,
responsiveTableDl,
},

@@ -111,42 +115,25 @@ data,

```scss
<style scoped lang="scss">
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.cell1 {
grid-column: 1/2;
grid-row: 1;
}
.cell2 {
grid-column: 1/2;
grid-row: 2;
}
.cell3 {
grid-column: 2/3;
grid-row: 1;
}
.cell4 {
grid-column: 2/3;
grid-row: 2;
}
.actions {
grid-column: 3/4;
grid-row: 1;
}
</style>
```
in your App.vue
```scss
<style scoped lang="scss">
.responsive-table.table-main-container {
table.wm-table {
table.wm-table-dl {
tbody[data-cy="table-body"] {
tr.row-table {
tr.row-table-dl {
border-bottom: 1px solid cornflowerblue;
}
tr.row-table:hover {
tr.row-table-dl:hover {
border: 2px solid cornflowerblue;
}
tr.row-table:nth-child(odd) {
tr.row-table-dl:nth-child(odd) {
background-color: aliceblue !important;

@@ -157,2 +144,22 @@ }

}
.cell1 {
grid-column: 1/2;
grid-row: 1;
}
.cell2 {
grid-column: 1/2;
grid-row: 2;
}
.cell3 {
grid-column: 2/3;
grid-row: 1;
}
.cell4 {
grid-column: 2/3;
grid-row: 2;
}
.actions {
grid-column: 3/4;
grid-row: 1;
}
</style>

@@ -159,0 +166,0 @@ ```

src/App.vue

Sorry, the diff of this file is not supported yet