-
Notifications
You must be signed in to change notification settings - Fork 380
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(react-grid): extract the Table plugin components #766
feat(react-grid): extract the Table plugin components #766
Conversation
@@ -41,6 +48,9 @@ Table.NoDataCell = TableNoDataCell; | |||
Table.NoDataRow = TableRow; | |||
Table.StubCell = TableStubCell; | |||
Table.StubHeaderCell = TableStubCell; | |||
Table.Table = TableComponent; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use Table.Root
or Table.Container
here? @viterobk
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Table.Root is the another component. Seems that it didn't published yet
@@ -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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A component that renders a
thead
tag.
A component that renders a table head.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A component that renders a static or fixed table? And probably headTableComponent
-> staticTableComponent
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feels like stickyTableComponent
is more suitable than staticTableComponent
<Table.Table | ||
{...restProps} | ||
// eslint-disable-next-line no-alert | ||
className="table-striped" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What does this class mean in MUI?
} | ||
*/ | ||
|
||
const TableComponent = ({ ...restProps }) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a note. I don't like to add obvious postfix (e.g. xxxComponent for React components)
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feels like stickyTableComponent
is more suitable than staticTableComponent
@@ -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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's rewrite it into something similar to the next paragraph. It will be better to mention the tableComponent, headComponent and bodyComponent properties instead.
} from '../../../demo-data/generator'; | ||
|
||
const TableComponent = ({ ...restProps }) => ( | ||
<Table.Container |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Container? Why?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Table
name was better?
@@ -26,9 +25,9 @@ export const TableLayout = ({ | |||
columns={columns} | |||
minColumnWidth={MINIMAL_COLUMN_WIDTH} | |||
containerComponent={TableContainer} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here is the Container/Root component. Should we publish it too?
@@ -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<[Table.ColumnExtension](#tablecolumnextension)> | | Additional column properties that the plugin can handle. | |||
tableComponent | ReactNode | | A component that renders a table. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Replace ReactNode
to ComponentType
or ComponentType<object>
@@ -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<[Table.ColumnExtension](table.md#tablecolumnextension)> | Additional column properties that the plugin can handle. | |||
tableComponent | ReactNode | | A component that renders a table. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Replace ReactNode
to ComponentType
or ComponentType<object>
@@ -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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Replace Object
to object
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix description. And seems that the component name is not good enough.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kvet what about stickyHeaderComponent
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"Fixed" is more appropriate term here. What about fixedHeaderComponent
?
@@ -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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tableHeadComponent? tableBodyComponent? Missed semicolon at the end of the paragraph
No description provided.