Skip to content

Is there a way to add Customized Header Labels, like multiline headers? #1248

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

Open
arunkmr25 opened this issue Apr 9, 2020 · 8 comments
Open

Comments

@arunkmr25
Copy link

arunkmr25 commented Apr 9, 2020

Is there a way to add Customized Header Labels, like multiline headers?

Expected Behavior

I want to add two show two column data in one column, thus for rendering data, I can use render body and show multiple column values. but how do I add two labels in one column header?

Current Behavior

I tried doing this:
const name= "

""
"Name"
""
""
"Id"
""
"
{ name: "dateTime", label: name},

but sorting fails by Maximum call stack size exceeded
Note: i was not able to put "div", ignore the "" above.

Steps to Reproduce (for bugs)

Your Environment

image

Tech Version
Material-UI
MUI-datatables
React
browser
etc
@kartiknegandhi
Copy link

@gabrielliwerant I need similar multi header support too.Is there any such feature available?if not, then could u please help me with it?
Need a feature in which we can provide nested objects in column like
columns={[{
Header: 'Name',
columns: [{
Header: 'First Name',
accessor: 'firstName'
}, {
Header: 'Last Name',
id: 'lastName',
accessor: d => d.lastName
}]
}]}

such that we can have first name and last name under Name column as shown in the image

Screen Shot 2020-04-13 at 11 29 13 AM

@wdh2100
Copy link
Collaborator

wdh2100 commented Apr 14, 2020

Hello @kartiknegandhi

In my opinion, implementing multi header now requires a complicated process.

  • First
customHeadRender function   Function that returns a string or React component. Used as display for column header. function(columnMeta, handleToggleColumn) => string| React Component

First you have to header render with customHeadRender

  • Second
customBodyRender function   Function that returns a string or React component. Used as display data within all table cells of a given column. function(value, tableMeta, updateValue) => string| React Component Example

Second you have to column render with **customBodyRender **

@rohangampa
Copy link

Hi @wdh2100 even i am facing similar issue . i was not able to achieve using customHeadRender and customBodyRender

any small example would be helpful .

Thanks in Advance

@wdh2100
Copy link
Collaborator

wdh2100 commented Aug 31, 2020

@rohangampa

ref : #1441

@arezki1990
Copy link

Hello , i am facing the same problem any solution because i can't use neither exapnd nor customHeadRender

@ivo96
Copy link

ivo96 commented Sep 16, 2021

@rohangampa

ref : #1441

Hi the issue you are referring to is for expanding the rows. The issue here is for multi line headers .
Can someone provide an example for those of us who are still trying to figure it out?
Or at least if you could tell us how to insert two table rows in the header?

Thank you

@vjravibuddy
Copy link

vjravibuddy commented Jan 5, 2022

Capture

i want exactly above the image in functional component

@notHuy
Copy link

notHuy commented May 10, 2023

Hi @vjravibuddy , did you find the solution for your problem. I am in the same case, but don't know how to do it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants