CSmart Table Header

[jgeagea]

Hello,

Is it possible to show an example of how to add a header to columns in CSmart Table?

I am trying this way:

let returnedColumns = [

        {
            label: "test"

        },
        {
            label: "name",

            columns: [
                {
                    label: "first_name"
                },
                {
                    label: "last_name"
                }
            ]
        }

    ];

[xidedix]

prop columns: string|Column[]

prop	type		notes
key	string	required	Column name equal to the item key.
label	string		Visible caption of column (auto-generated if not specified).
_classes	string/array/object		Adds classes to all cells in a column.
_style	string/array/object		Adds styles to the column header (useful for defining widths).
sorter	boolean		Disables sorting of the column when set to false.
filter	boolean		Removes filter from column header when set to false.

const items = [
  { first_name: 'John', last_name: 'Doe' },
  { first_name: 'Arthur', last_name:  'Dent' },
  { first_name: 'Tricia', last_name: 'McMillan' },
]

const columns = [
  { key: 'first_name' },
  { key: 'last_name' },
]

or

const columns = ['first_name', 'last_name']

gives:

First Name	Last Name
John	Doe
Arthur	Dent
Tricia	McMillan

[jgeagea]

Thank you for your reply!

Is it possible to have a header column as "name" which combines 2 columns (first_name and last_name) ?

[xidedix]

you can:

1. transform items array like

const newItems = items.map(item => {
  const name = item.first_name +' '+ item.last_name;
  return {...item, name}
})

or
2. set column labels like

const columns = [
  { key: 'first_name', label: 'name'},
  { key: 'last_name', label: ''},
]

[jgeagea]

Thank you for your reply again!

That's not what I'm aiming for, unfortunately.

What I want is a header column "Name" and under it the 2 columns: First name and Last name

Like this:

[xidedix]

@jgeagea, thanks for the clarification!
We're considering implementing column header groups.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions