React-data-grid: group columns

[antoine35]

Hi !
Is it possible to have headers with grouped columns and how activate that option ?
Thanks

[jpdriver]

hey @antoine35, i'm not sure what you mean by "grouped columns".

we have the ability to group rows by a particular Column -- is that what you want to do?

ps. in future, please don't delete the Issue template when you're opening a New Issue. it helps us stay organised and keep track of things. thank you!

[antoine35]

ok, sorry to delete the issue template.

By group entries, I would like to have for example columns with multiple entries, for example instead of having three columns as number of participants 2012 / number of participants 2013 / number of participants 2014, a single column that would be the number of participants But split into three sub-columns which would be the years.

Thanks

[GenoD]

My team would also like a solution like this if possible!

Header: Company Name
Sub-columns: price column, quote column, checkbox column

It would help greatly to reduce number of headers and would allow our users to understand the grouping system we use.

Note: Normally we would just use a custom cell renderer. However, in this use case one of the sub-columns needs to be editable.

[pizzadev]

Yep, that would be cool feature. We also need that kind of columns.

[LuisGAngel]

@GenoD how can I use a custom cell renderer? Can you show an example? Thanks

[GenoD]

@LuisGerardoAngel for instance if needed we would create a customer formatter.

This code represents the column we wish to have a custom format. (This is a delete button):

  const columns = [
            {
                name: <Translate value="delete" />,
                width: 50,
                formatter: DeleteFormatter,
                getRowMetaData: (row) => row
            },

_getRowMetaData_ allows us to pass through all the attributes (including info in other collumns) from the current row this cell resides in.

This code returns our custom cell contents:

const DeleteFormatter = React.createClass({
            render() {
              return <span><Button
                bsStyle="danger"
                className="textAlignStyle" style={{ height: '23px', width: '39px', padding: '0px' }}
                onClick={() => {
                  var ProductNum = this.props.dependentValues.ProductNum;
                  that.removeRow(ProductNum);
                }}>X</Button></span>;
              }
        });

As you can see we add in some custom styling to our button and even pass it a function to call on click. So technically we can display all sorts of data at once but for our use case we need only 1 field to be editable.

Note:
We use "this" to get the props passed through from the previously mentioned _getRowMetaData_ function. "that" is a workaround used to gain the context necessary to access the call to delete row as each of the cells is actually an individual component.

[LuisGAngel]

@GenoD Thanks for the response, but how can achieve the grouped columns with this?

[slawkow68]

@LuisGerardoAngel Have you found some solution to this problem? I'm facing exactly the same right now...

[JimLynchCodes]

any solution for grouped columns yet?

[cwiese]

me too!

[JimLynchCodes]

I'm guessing this is not being worked on since no one answered since I asked four months ago. My team and I really needed this feature, and we ultimately ended up switching to ag-grid: https://www.ag-grid.com

[cwiese]

Wow!!!!!!!!

On Jan 2, 2018, at 4:26 PM, Jim Lynch [e-mail] wrote:

I'm guessing this is not being worked on since no one answered since I asked four months ago. My team and I really needed this feature, and we ultimately ended up switching to ag-grid: https://www.ag-grid.com https://www.ag-grid.com/
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/adazzle/react-data-grid/issues/765#issuecomment-354879429, or mute the thread https://github.com/notifications/unsubscribe-auth/AAK5X_Yf8UsdBX5x0dyoOPEX_PVqF_Hxks5tGp8ZgaJpZM4NImZM.

[cwiese]

ag-grid is not open source.

On Jan 2, 2018, at 4:26 PM, Jim Lynch <[email protected][e-mail]> wrote:

I'm guessing this is not being worked on since no one answered since I asked four months ago. My team and I really needed this feature, and we ultimately ended up switching to ag-grid: https://www.ag-grid.comhttps://www.ag-grid.com/

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/adazzle/react-data-grid/issues/765#issuecomment-354879429, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AAK5X_Yf8UsdBX5x0dyoOPEX_PVqF_Hxks5tGp8ZgaJpZM4NImZM.

Confidentiality Notice:
This e-mail, including any attachments is the property of Trinity Health and is intended for the sole use of the intended recipient(s). It may contain information that is privileged and confidential. Any unauthorized review, use, disclosure, or distribution is prohibited. If you are not the intended recipient, please delete this message, and reply to the sender regarding the error in a separate email.

[OmerAli]

is there any progress on group column

[jamesajones]

If I use the
``
const columns = [
{
name: ,
width: 50,
formatter: DeleteFormatter,
getRowMetaData: (row) => row
},
```
what does the static propTypes {} block look like?
within the formatter get this.props.dependentValues to get the row data

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[cwiese]

When will this all be on React 16?

On Jul 12, 2018, at 7:33 AM, stale[bot] [e-mail] wrote:

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/adazzle/react-data-grid/issues/765#issuecomment-404481920, or mute the thread https://github.com/notifications/unsubscribe-auth/AAK5XzyqweBdDEBzXaocVJgIaiisXp4Oks5uFzQAgaJpZM4NImZM.

[Se0ng11]

@cwiese, it won't be happen as the project is stale

[mervick]

@Se0ng11 do you know any new project like this?

[Se0ng11]

@mervick, have a look on the community who love this plugin
https://github.com/adazzle/react-data-grid/issues/1049

[mervick]

@Se0ng11 and there is nothing happen there, just a proposal without any solution

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[ks549]

hey @antoine35, i'm not sure what you mean by "grouped columns".

we have the ability to group rows by a particular Column -- is that what you want to do?

ps. in future, please don't delete the Issue template when you're opening a New Issue. it helps us stay organised and keep track of things. thank you!

Hi @jpdriver - I want to group rows by a particular column (Refer image- like rowspan). Is there a way to handle this?

[cwiese]

This is grouped columns

On Apr 18, 2019, at 8:33 PM, Keerthana [e-mail] wrote:

hey @antoine35 https://github.com/antoine35, i'm not sure what you mean by "grouped columns".

we have the ability to group rows by a particular Column -- is that what you want to do?

ps. in future, please don't delete the Issue template when you're opening a New Issue. it helps us stay organised and keep track of things. thank you!

Hi @antoine35 https://github.com/antoine35 - I want to group rows by a particular column (Refer image). Is there a way to handle this?
https://user-images.githubusercontent.com/14854604/56398916-2a022980-6219-11e9-9906-1b58a3069ed9.png
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/adazzle/react-data-grid/issues/765#issuecomment-484731871, or mute the thread https://github.com/notifications/unsubscribe-auth/AABLSX7RP6W3HUY6FE7H34LPREHMRANCNFSM4DJCMZGA.