);
}
@@ -116,4 +48,7 @@ const factory = (Checkbox) => {
return TableRow;
};
-export default factory;
+const TableRow = factory(InjectCheckbox, InjectTableCell);
+export default themr(TABLE)(TableRow);
+export { factory as tableRowFactory };
+export { TableRow };
diff --git a/components/table/_config.scss b/components/table/_config.scss
deleted file mode 100644
index 7ec3b5a2..00000000
--- a/components/table/_config.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$table-row-height: 48px !default;
-$table-row-divider: solid 1px rgba(0,0,0,.12) !default;
-$table-row-offset: 1.8 * $unit !default;
-$table-row-highlight: #eee !default;
-$table-text-color: #757575 !default;
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
deleted file mode 100644
index a4946bd3..00000000
--- a/components/table/index.d.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface TableTheme extends TableRowTheme {
- /**
- * Classname used for the root element.
- */
- table?: string;
-}
-
-export interface TableProps extends ReactToolbox.Props {
- /**
- * If true, component will show a heading using model field names.
- * @default true
- */
- heading?: boolean;
- /**
- * Object describing the data model that represents each object in the source.
- */
- model?: any;
- /**
- * Callback function that is fired when an item in a row changes. If set, rows are editable.
- */
- onChange?: Function;
- /**
- * Callback fired when row was clicked.
- */
- onRowClick?: Function;
- /**
- * Callback function invoked when the row selection changes.
- */
- onSelect?: Function;
- /**
- * If true, each row will display a checkbox to allow the user to select that one row.
- * @default true
- */
- selectable?: boolean;
- /**
- * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
- * @default true
- */
- multiSelectable?: boolean;
- /**
- * Array of indexes of the items in the source that should appear as selected.
- */
- selected?: any[];
- /**
- * Array of objects representing each item to show.
- */
- source?: any[];
- /**
- * Classnames object defining the component style.
- */
- theme?: TableTheme;
-}
-
-export class Table extends React.Component { }
-
-export interface TableHeadTheme {
- /**
- * It will be added to a row in case it is selectable.
- */
- selectable?: string;
-}
-
-export interface TableHeadProps extends ReactToolbox.Props {
- /**
- * Object describing the data model that represents each object in the source.
- */
- model?: any;
- /**
- * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
- */
- multiSelectable?: boolean;
- /**
- * Callback function invoked when the row selection changes.
- */
- onSelect?: Function;
- /**
- * If true, each row will display a checkbox to allow the user to select that one row.
- * @default true
- */
- selectable?: boolean;
- /**
- * Whether header should look selected.
- * @default false
- */
- selected?: boolean;
- /**
- * Classnames object defining the component style.
- */
- theme?: TableHeadTheme;
-}
-
-export class TableHead extends React.Component { }
-
-export interface TableRowTheme extends TableHeadTheme {
- /**
- * It will be added to a row in case it is editable.
- */
- editable?: string;
- /**
- * Used for the row element.
- */
- row?: string;
- /**
- * Added to a row in case it is selected.
- */
- selected?: string;
-}
-
-export interface TableRowProps {
- /**
- * Single row data.
- */
- data?: any;
- /**
- * Row index.
- */
- index?: number;
- /**
- * Object describing the data model that represents each object in the source.
- */
- model?: any;
- /**
- * Callback function that is fired when an item in a row changes. If set, rows are editable.
- */
- onChange?: Function;
- /**
- * Callback fired when row was clicked.
- */
- onRowClick?: Function;
- /**
- * Callback function invoked when the row selection changes.
- */
- onSelect?: Function;
- /**
- * If true, each row will display a checkbox to allow the user to select that one row.
- * @default true
- */
- selectable?: boolean;
- /**
- * Whether table row should look selected.
- * @default false
- */
- selected?: boolean;
-}
-
-export class TableRow extends React.Component { }
-
-export default Table;
diff --git a/components/table/index.js b/components/table/index.js
index 77e1c775..e59d877b 100644
--- a/components/table/index.js
+++ b/components/table/index.js
@@ -1,15 +1,22 @@
import { themr } from 'react-css-themr';
import { TABLE } from '../identifiers.js';
import { Checkbox } from '../checkbox';
+import { FontIcon } from '../font_icon';
+
import { tableFactory } from './Table.js';
-import tableHeadFactory from './TableHead.js';
-import tableRowFactory from './TableRow.js';
-import theme from './theme.scss';
+import { tableHeadFactory } from './TableHead.js';
+import { tableRowFactory } from './TableRow.js';
+import { tableCellFactory } from './TableCell.js';
+import theme from './theme.css';
const applyTheme = (Component) => themr(TABLE, theme)(Component);
-const ThemedTableHead = applyTheme(tableHeadFactory(Checkbox));
-const ThemedTableRow = applyTheme(tableRowFactory(Checkbox));
+const ThemedTableCell = applyTheme(tableCellFactory(FontIcon));
+const ThemedTableHead = applyTheme(tableHeadFactory(Checkbox, ThemedTableCell));
+const ThemedTableRow = applyTheme(tableRowFactory(Checkbox, ThemedTableCell));
const ThemedTable = applyTheme(tableFactory(ThemedTableHead, ThemedTableRow));
export default ThemedTable;
export { ThemedTable as Table };
+export { ThemedTableHead as TableHead };
+export { ThemedTableRow as TableRow };
+export { ThemedTableCell as TableCell };
diff --git a/components/table/readme.md b/components/table/readme.md
index 4a385374..3d99021b 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -1,91 +1,158 @@
-# Table
+# Data Table
-The Table component is an enhanced version of the standard HTML `
`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
-
-*A note about models and table headers*: By default, the table header text uses name of the property in the model. Additionally, the table header text is automatically set in title case (first letter of each word capitalized). Thus, if you use the property name `twitter` in your model, the displayed table header will be `Twitter`. You can override the default text by including a `title` attribute, as demonstrated in the example below for the `birthdate` property. You may also override the title case in your own theme's css. In the following example, we force the first letter of the table header text to lowercase, using SCSS syntax:
-
-```
-.table {
- th {
- &:first-letter {
- text-transform: lowercase;
- }
- }
-}
-```
+The [Table component](https://material.google.com/components/data-tables.html) is an enhanced version of the standard HTML `