Fixed SelectFieldColumn and EditDialogColumn #170

The SelectFieldColumn was rewritten so that is positions itself
absolutely a bit more accurately so that it can correctly overflow in
data tables. Also updated the SelectFieldColumn and EditDialogColumn so
that when they are open, they will reposition themselves if the user
scrolls the table left or right.

To get a better rendering experience, I had to remove the `position:
relative` from the `.md-table-column`, so tooltips no longer work. I
will need to fix that before release.

docs/src/shared/components/ReactMD/data-tables/index.js

@@ -29,6 +29,12 @@ export default [{
   description: `
 When the \`plain\` prop is not enabled, the \`DataTable\` will inject a checkbox at the start of each
 row which will allow the user to select that row.
+
+This example also introduces another component: \`SelectFieldColumn\`. When using the \`SelectFieldColumn\`,
+your \`TableColumn\` in the \`TableHeader\` should apply the \`.md-table-column--select-field\` to position
+the header with your select field. In addition, it is recommended to specify an exact width or min-width for
+your column on your column's header. When the values for the select field are different widths, the column's
+size will keep changing.
 `,
   code: DataTableExampleRaw,
   children: <DataTableExample />,

docs/src/shared/constants/navItems.jsx

@@ -66,6 +66,10 @@ function mapToNavItems(route, parents = []) {
     resolvedComponent = component;
   } else if (props.href) {
     resolvedComponent = 'a';
+    if (!props.href.match(/sassdoc/)) {
+      props.rel = 'noopener noreferrer';
+      props.target = '_blank';
+    }
   } else if (!nestedItems) {
     resolvedComponent = Link;
   }
@@ -92,22 +96,18 @@ const routes = internalRoutes.concat([{ divider: true }, {
   href: 'https://facebook.github.io/react/',
   avatarProps: { src: reactLogo, alt: 'React Logo' },
   primaryText: 'React',
-  target: '_blank',
 }, {
   href: 'https://www.google.com/design/spec/material-design/introduction.html',
   avatarProps: { src: googleLogo, alt: 'Google Logo', className: 'google-logo' },
   primaryText: 'Material Design',
-  target: '_blank',
 }, {
   href: 'https://design.google.com/icons/',
   avatarProps: { src: googleLogo, alt: 'Google Logo', className: 'google-logo' },
   primaryText: 'Material Icons',
-  target: '_blank',
 }, {
   href: 'http://webaim.org/resources/contrastchecker/',
   icon: 'accessibility',
   primaryText: 'Contrast Checker',
-  target: '_blank',
 }]).map(route => mapToNavItems(route));
 
 function isNestedActive(nestedItems, pathname) {