feat(react-grid): extract the Table plugin components #766

MaximKudriavtsev · 2018-02-21T17:04:48Z

No description provided.

SergeyAlexeev · 2018-02-26T11:44:09Z

packages/dx-react-grid-bootstrap3/src/plugins/table.jsx

@@ -41,6 +48,9 @@ Table.NoDataCell = TableNoDataCell;
 Table.NoDataRow = TableRow;
 Table.StubCell = TableStubCell;
 Table.StubHeaderCell = TableStubCell;
+Table.Table = TableComponent;


Can we use Table.Root or Table.Container here? @viterobk

Table.Root is the another component. Seems that it didn't published yet

SergeyAlexeev · 2018-02-26T11:52:22Z

packages/dx-react-grid/docs/reference/table.md

@@ -119,6 +122,9 @@ noData? | string | 'No data' | Specifies text shown when the Grid does not conta

 Name | Properties | Description
 -----|------------|------------
+Table.Table | Object | A component that renders a `table` tag.
+Table.TableHead | Object | A component that renders a `thead` tag.


A component that renders a thead tag.

A component that renders a table head.

SergeyAlexeev · 2018-02-26T11:55:57Z

packages/dx-react-grid/docs/reference/virtual-table.md

+tableComponent | ReactNode | | A component that renders a `table` tag. It is a root component for `tr` tags.
+headComponent | ReactNode | | A component that renders a `thead` tag.
+bodyComponent | ReactNode | | A component that renders a `tbody` tag.
+headTableComponent | ReactNode | | A component that renders a header `table` tag. It is a root component for `thead` tag.


A component that renders a static or fixed table? And probably headTableComponent -> staticTableComponent.

Feels like stickyTableComponent is more suitable than staticTableComponent

kvet · 2018-02-26T14:52:12Z

packages/dx-react-demos/src/demo-sources/grid-basic/table-template.jsxt

+  <Table.Table
+    {...restProps}
+    // eslint-disable-next-line no-alert
+    className="table-striped"


What does this class mean in MUI?

kvet · 2018-02-26T14:54:05Z

packages/dx-react-demos/src/demo-sources/grid-basic/table-template.jsxt

+}
+*/
+
+const TableComponent = ({ ...restProps }) => (


Just a note. I don't like to add obvious postfix (e.g. xxxComponent for React components)

kvet · 2018-02-26T14:55:26Z

packages/dx-react-grid/docs/reference/virtual-table.md

+tableComponent | ReactNode | | A component that renders a `table` tag. It is a root component for `tr` tags.
+headComponent | ReactNode | | A component that renders a `thead` tag.
+bodyComponent | ReactNode | | A component that renders a `tbody` tag.
+headTableComponent | ReactNode | | A component that renders a header `table` tag. It is a root component for `thead` tag.


Feels like stickyTableComponent is more suitable than staticTableComponent

kvet · 2018-02-26T15:00:38Z

packages/dx-react-grid/docs/guides/fundamentals.md

@@ -18,7 +18,11 @@ The `TableHeaderRow` plugin should follow the `Table` plugin. See the [Plugin Or

 The Grid's visualization plugins provide a rich API to customize grid elements' appearance. Examples of the most popular customization tasks are described below.

-The `Table` plugin allows you to customize table cell appearance using the `cellComponent` property. For instance, you can implement conditional cell formatting as demonstrated in the following example:
+The `Table` plugin allows you to add properties for standard html Table's tags, for implement this use the Table's [components](../reference/table.md/#plugin-components). The following sample demonstrated how to make a 'striped' table.


Let's rewrite it into something similar to the next paragraph. It will be better to mention the tableComponent, headComponent and bodyComponent properties instead.

kvet · 2018-02-27T06:31:52Z

packages/dx-react-demos/src/demo-sources/grid-basic/bootstrap3/table-template.jsx

+} from '../../../demo-data/generator';
+
+const TableComponent = ({ ...restProps }) => (
+  <Table.Container


Container? Why?

Table name was better?

kvet · 2018-02-27T06:33:30Z

packages/dx-react-grid-bootstrap3/src/templates/table-layout.jsx

@@ -26,9 +25,9 @@ export const TableLayout = ({
    columns={columns}
    minColumnWidth={MINIMAL_COLUMN_WIDTH}
    containerComponent={TableContainer}


Here is the Container/Root component. Should we publish it too?

kvet · 2018-03-01T08:50:18Z

packages/dx-react-grid/docs/reference/table.md

@@ -14,6 +14,10 @@ A plugin that renders Grid data as a table. It contains the Table Row and Table
 Name | Type | Default | Description
 -----|------|---------|------------
 columnExtensions? | Array&lt;[Table.ColumnExtension](#tablecolumnextension)&gt; | | Additional column properties that the plugin can handle.
+tableComponent | ReactNode | | A component that renders a table.


Replace ReactNode to ComponentType or ComponentType<object>

kvet · 2018-03-01T08:50:35Z

packages/dx-react-grid/docs/reference/virtual-table.md

@@ -16,6 +16,11 @@ Name | Type | Default | Description
 height | number | 530 | The virtual table's height.
 estimatedRowHeight | number | `37` for [Bootstrap3](https://www.npmjs.com/package/@devexpress/dx-react-grid-bootstrap3); `48` for [Material UI](https://www.npmjs.com/package/@devexpress/dx-react-grid-material-ui) | Estimated row height. Specify the average value for a table whose rows have different heights.
 columnExtensions? | Array&lt;[Table.ColumnExtension](table.md#tablecolumnextension)&gt; | Additional column properties that the plugin can handle.
+tableComponent | ReactNode | | A component that renders a table.


Replace ReactNode to ComponentType or ComponentType<object>

kvet · 2018-03-01T08:51:13Z

packages/dx-react-grid/docs/reference/table.md

@@ -119,6 +123,10 @@ noData? | string | 'No data' | Specifies text shown when the Grid does not conta

 Name | Properties | Description
 -----|------------|------------
+Table.Table | Object | A component that renders a table.


Replace Object to object

kvet · 2018-03-01T09:01:06Z

packages/dx-react-grid/docs/reference/virtual-table.md

+tableComponent | ReactNode | | A component that renders a table.
+headComponent | ReactNode | | A component that renders a table head.
+bodyComponent | ReactNode | | A component that renders a table body.
+stickyTableComponent | ReactNode | | A component that renders a sticky header.


Fix description. And seems that the component name is not good enough.

@kvet what about stickyHeaderComponent?

"Fixed" is more appropriate term here. What about fixedHeaderComponent?

kvet · 2018-03-01T09:03:22Z

packages/dx-react-grid/docs/guides/fundamentals.md

@@ -18,7 +18,11 @@ The `TableHeaderRow` plugin should follow the `Table` plugin. See the [Plugin Or

 The Grid's visualization plugins provide a rich API to customize grid elements' appearance. Examples of the most popular customization tasks are described below.

-The `Table` plugin allows you to customize table cell appearance using the `cellComponent` property. For instance, you can implement conditional cell formatting as demonstrated in the following example:
+The `Table` plugin allows you to customize table, table head and table body appearance using `tableComponent`, `tableHead`, `tableBody` and `containerComponent` [properties](../reference/table.md/#properties) of Table. The following sample demonstrated how to use `tableComponent` and make a 'striped' table.


tableHeadComponent? tableBodyComponent? Missed semicolon at the end of the paragraph

MaximKudriavtsev added 4 commits February 21, 2018 19:47

Extract the Table Component

efa27b7

Fix tests

4ced25a

Add support the Table mui and the VirtualTable

dd94fc2

Add docs

44754b8

MaximKudriavtsev changed the title ~~[wip]feat(react-grid): extract the Table component~~ feat(react-grid): extract the Table plugin components Feb 22, 2018

MaximKudriavtsev requested review from kvet, SergeyAlexeev and gsobolev February 22, 2018 14:51

MaximKudriavtsev added 5 commits February 23, 2018 09:35

Add tests for Table mui

b88350d

Change object -> Object

be0bd06

Add docs

a08a932

Add demo

c96d4ac

Refactor

6ab1d8a

SergeyAlexeev reviewed Feb 26, 2018

View reviewed changes

kvet reviewed Feb 26, 2018

View reviewed changes

Fix after review

8763d55

kvet reviewed Feb 27, 2018

View reviewed changes

MaximKudriavtsev added 2 commits February 28, 2018 14:39

Extract the Table.Container component

5fcaa65

Extract the VirtualTable.Container component

31250f1

kvet reviewed Mar 1, 2018

View reviewed changes

MaximKudriavtsev added 2 commits March 2, 2018 09:29

Merge branch 'master' into extract-table-component

1e41178

Add bs4 support

39b6bc1

kvet mentioned this pull request Mar 5, 2018

How to make Header sticky? #806

Closed

1 task

viterobk added 3 commits March 5, 2018 11:26

Update fundamentals.md

a3bd54b

Update table.md

88ecc92

Update virtual-table.md

8a133fb

viterobk approved these changes Mar 5, 2018

View reviewed changes

kvet approved these changes Mar 5, 2018

View reviewed changes

gsobolev approved these changes Mar 5, 2018

View reviewed changes

kvet requested a review from dirk-pieterse March 5, 2018 13:45

SergeyAlexeev approved these changes Mar 6, 2018

View reviewed changes

dirk-pieterse added 3 commits March 7, 2018 11:01

Update fundamentals.md

2f80883

Update table.md

2977e83

Update virtual-table.md

6bd33e1

dirk-pieterse approved these changes Mar 7, 2018

View reviewed changes

Merge branch 'master' into extract-table-component

38e32bd

kvet merged commit e626a66 into DevExpress:master Mar 7, 2018

MaximKudriavtsev deleted the extract-table-component branch April 5, 2018 10:52

franklixuefei mentioned this pull request Apr 9, 2018

Fixed header without Virtual Scrolling #896

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-grid): extract the Table plugin components #766

feat(react-grid): extract the Table plugin components #766

MaximKudriavtsev commented Feb 21, 2018

SergeyAlexeev Feb 26, 2018 •

edited

Loading

kvet Feb 26, 2018

SergeyAlexeev Feb 26, 2018 •

edited

Loading

SergeyAlexeev Feb 26, 2018

kvet Feb 26, 2018

kvet Feb 26, 2018

kvet Feb 26, 2018

kvet Feb 26, 2018

kvet Feb 26, 2018

kvet Feb 27, 2018

MaximKudriavtsev Feb 28, 2018

kvet Feb 27, 2018

kvet Mar 1, 2018

kvet Mar 1, 2018

kvet Mar 1, 2018

kvet Mar 1, 2018

MaximKudriavtsev Mar 1, 2018

viterobk Mar 1, 2018

kvet Mar 1, 2018

feat(react-grid): extract the Table plugin components #766

feat(react-grid): extract the Table plugin components #766

Conversation

MaximKudriavtsev commented Feb 21, 2018

SergeyAlexeev Feb 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SergeyAlexeev Feb 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SergeyAlexeev Feb 26, 2018 •

edited

Loading

SergeyAlexeev Feb 26, 2018 •

edited

Loading