vue-scrolling-table - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
 	"name": "vue-scrolling-table",
-	"version": "0.1.0",
-	"description": "A Vue component to create tables with vertical and horizontal scrolling. Flexbox-based.",
+	"version": "0.1.1",
+	"description":
+		"A Vue component to create tables with vertical and horizontal scrolling. Flexbox-based.",
 	"author": "richardtallent <[e-mail]>",
@@ -53,7 +54,3 @@ "main": "dist/vue-scrolling-table.js",
 	},
-	"browserslist": [
-		"> 1%",
-		"last 2 versions",
-		"not ie < 11"
-	],
+	"browserslist": ["> 1%", "last 2 versions", "not ie < 11"],
 	"prettier": {
@@ -82,6 +79,3 @@ "useTabs": true,
 		},
-		"extends": [
-			"eslint:recommended",
-			"plugin:vue/recommended"
-		],
+		"extends": ["eslint:recommended", "plugin:vue/recommended"],
 		"rules": {
@@ -93,5 +87,3 @@ "vue/html-indent": "tab",
 	},
-	"eslintIgnore": [
-		"node_modules/*.*"
-	],
+	"eslintIgnore": ["node_modules/*.*"],
 	"postcss": {
@@ -98,0 +90,0 @@ "plugins": {

README.md

@@ -5,15 +5,10 @@ # vue-scrolling-table
 
-## Development Status
-This is the first release, based on a demo CodePen here:
-https://codepen.io/richardtallent/pen/rpWBQK
+## Demo
+There is a live demo here:
+https://tallent.us/vue-scrolling-table-sample
 
-I've not tested this component at all--I'm hoping that Vue's slots work as I hope (for example,
-that I'll be able to attach the `onscroll` event and some styling to a slotted element).
+The repo for the demo application is here:
+https://github.com/richardtallent/vue-scrolling-table-sample
 
-## Demo
-I will have a demo app up at some point. In the meantime you can look at the CodePen above, which
-isn't using the Vue component, but uses the same CSS/JS technique.
-
 ## Properties
-For now, there is only one property:
 
@@ -26,2 +21,6 @@ ### deadAreaColor
 
+## includeFooter
+This is a **Boolean** value, the default is `false`. Set this to `true` if you are providing content
+for a `tfoot` slot, otherwise the element will not be rendered.
+
 ## Slots
@@ -31,16 +30,18 @@ This is a *very* simple wrapper for an HTML table. This component is not intended to, itself be used
 decorated as needed to make the scrolling happen, but otherwise the calling parent component/application
-is responsible for the actual thead, tbody, and (optional) tfoot markup and all of the rows and cells
-within them. This is done using *named slots*.
+is responsible for the **contents of** the `<thead>`, `<tbody>`, and (optional) `<tfoot>` elements
+(*i.e.*, the `<tr>`, `<td>`, and `<th>` tags). This is done using Vue's *named slots*.</p>
 
 ### thead
-Required. Use this slot to inject your `<thead>` tag. The component will freeze it at the top, and
-will synchronize its horizontal scrolling with `<tbody>` scroll (there may be a short delay).
+Required. Use this slot to inject the `<thead>` element's contents. The component will freeze it at
+the top, and will synchronize its horizontal scrolling with `<tbody>` scroll (there may be a short
+delay).
 
 ### tbody
-Required. Use this slot to inject your `<tbody>` tag. The component will make it scrollable.
+Required. Use this slot to inject the `<tbody>` element's contents. The component will make it
+scrollable.
 
 ### tfoot
-Optional. Use this slot if you want to inject a `<tfoot>` tag. The component will freeze it at the
-bottom, below the scrolled `<tbody>`. For now, this element is not scrolled automatically with the
-body. If a user has a use case for this, it could be done pretty easily.
+Optional. Use this slot if you want to inject contents for a `<tfoot>` element. The component will
+freeze it at the bottom, below the scrolled `<tbody>`. For now, this element is not scrolled
+automatically with the body. If a user has a use case for this, it could be done pretty easily.
 
@@ -50,3 +51,3 @@ ## Example Usage
 <vue-scrolling-table>
-  <thead slot="thead">
+  <template slot="thead">
     <tr>
@@ -57,10 +58,10 @@ <th v-for="col in columns"
     </tr>
-  </thead>
-  <tbody slot="tbody">
+  </template>
+  <template slot="tbody">
     <tr v-for="item in items" :key="item.id">
-	  <td v-for-"col in columns"
+	  <td v-for="col in columns"
 		:class="col.cssClasses"
 		:key="col.id">{{ item[col.id] }}</td>
     </tr>
-  </tbody>
+  </template>
 </vue-scrolling-table>
@@ -90,4 +91,4 @@ ```
 
-However, the use of `block` on the head and body disconnects how HTML tables usually ensure that the header
-and body rows have the same column widths and scroll horizontally in tandem.
+However, the use of `block` on the head and body disconnects how HTML tables usually ensure that
+the header and body rows have the same column widths and scroll horizontally in tandem.
 
@@ -99,3 +100,3 @@ Fixing the scroll just requires tracking the user's horizontal scroll events on the body and
 the header isn't, the portion of the body used by the scrollbar doesn't look right in the header.
-To alleviate this, we tell the `thead` to have a vertical scrollbar (even though it is never
+To alleviate this, we tell the `<thead>` to have a vertical scrollbar (even though it is never
 needed), then we use CSS to style the scrollbar to be the same as our the color used outside the
@@ -105,6 +106,9 @@ table itself. There are no standard CSS properties for this, we target the browser-specific ones
 
+Before creating the Vue component, the proof of concept was done on CodePen:
+https://codepen.io/richardtallent/pen/rpWBQK
+
 ## Slot Markup and Styling Requirements
 While a component could attempt to track changes to the width of each column of the header and
 body and synchronize those changes with the other, in practice it is much more difficult than
-synchroized scrolling, because there is no one reliable DOM event to listen to to capture 
+synchronized scrolling, because there is no one reliable DOM event to listen to to capture 
 everything that could resize a `<th>` or `<td>`... it could be a result of a content change,
@@ -116,5 +120,8 @@ CSS change, window resize, layout resize, etc. Most implementations I've seen track some events,
 column's width matches the corresponding body columns width. The default CSS for the component
-sets the `width` and `min-width` to `10em` to make all cells match out of the box. You can use
-CSS or `style` attributes in your markup to customize this for any column (remember to set both
-attributes, otherwise contents can still resize the column width).
+sets the `width`, `min-width`, and `max-width` to `10em` to make all cells match out of the box.
+Cells are also defaulted to word-wrap if needed, even if there are no word breaks in the text,
+and they are set to, if overflow is inevitable, that the overflow is hidden. This is all key
+to having a reliable column width. You can use CSS or `style` attributes in your markup to
+customize this for any column (remember to set all three width attributes, otherwise contents
+of your cells could still resize the column width).
 
@@ -139,3 +146,3 @@ While you cannot use auto-width or percentages and hope to keep the header and body columns
 I'm open to other ideas, as long as they don't limit the flexibility of using slots for the
-header, body, and footer. But if someone wants to *build* a datagrid component that has this
+header, body, and footer. But if someone wants to *build* a data grid component that has this
 as a dependency, I'm all for it.
@@ -158,1 +165,2 @@
 | 2017.12.24 | 0.1.0   | First published version                                                                    |
+| 2017.12.24 | 0.1.1   | Patch based on sample app deveopment                                                       |

No alert changes

Improved metrics

Total package byte prevSize

33939

2.67%

Number of lines in readme file

156

5.41%

No dependency changes