adding dynamic columns without accessors among other columns

[vtarelkin]

Good day.

I use react-table v6.

I have many columns in

                columns={[

                    {
                        Header: 'column1',
                        headerClassName: "excel-table-header-class",
                        className: "excel-table-row-class",
                        accessor: 'column1',
                        width: 100,
                    },

and so on.

And I want to add some dynamic columns - if user chooses to add several columns into that table. So in modal dialog user chooses what columns with what headers he wants to add.

Then in my react-table I do

const customColumns = myUserArray.map(item =>  {
    return {
    Header: '111',
    headerClassName: "excel-table-header-class",
    className: "excel-table-row-class",
    width: 100
}});

And is array is with size 3, I want to have 3 columns.

So, in my columns I add

                columns={[

                    {
                        Header: 'column1',
                        headerClassName: "excel-table-header-class",
                        className: "excel-table-row-class",
                        accessor: 'column1',
                        width: 100,
                    },
                     customColumns,

but this doesn't work. Actually it works - it shows one column with no header, no params. Apparently, if I do

                columns={[

                    {
                        Header: 'column1',
                        headerClassName: "excel-table-header-class",
                        className: "excel-table-row-class",
                        accessor: 'column1',
                        width: 100,
                    },
                     customColumns[0],

it works ok but I want to show all columns, not only one.

At least, but not last, in the end I want to use such syntax

  const customColumns = () => {
        const {myUserArray} = props;
        if (myUserArray !== undefined && myUserArray.length !== 0) {
            myUserArray.map((item, index) => {
                return (
                    {
                        Header: 'C2',
                        headerClassName: "excel-table-header-class",
                        className: "excel-table-row-class",
                        width: 100,                                        
                                 });
                              });
                            }
                          };

Where is the error? How can this be done? Anyone who reads and helps - thank you!

[vtarelkin]

help, I need somebody, help is there anybody?

[jelizarovas]

if you are trying to make excel type data grid (assume from class excel-table), then you are better off using other libraries

[vtarelkin]

why do you not have accessors?

thank you for responce. I want to have values in some columns to be counted dynamically - for ex. column №4 is the sum of 1 and 3 columns. Should I have accessors?

[vtarelkin]

if you are trying to make excel type data grid (assume from class excel-table), then you are better off using other libraries

no, it is only a name. I am trying to make a table with arbitrary count of columns.

[jelizarovas]

I wonder if the calculations should be done on the react table itself, or setters and getters should be used on the object?

I'm using version 7 of react table, so if you could create a code send box or j fiddle with what you have working so far maybe we could help you.

[vtarelkin]

I wonder if the calculations should be done on the react table itself, or setters and getters should be used on the object?

I'm using version 7 of react table, so if you could create a code send box or j fiddle with what you have working so far maybe we could help you.

I have a table with predifined values. And, after user choses what more columns he needs, I calculate those user-selected column on the fly. For ex. I have

col1   col2    sum
1         2       3

There sum is user-defined column. How can I insert it into table?

But user may wants to add another column with for ex. divider.
And I need to have an ablitity to dynamically add more columns as I've shown in my first post.

[vtarelkin]

I described all columns in different arrays and used in columns concat method, that worked for me.

[ObaidAshiq]

can u provide the source code of how you achieved it?

[KirillErz]

I encountered the same problem, did you manage to solve this problem?

[ObaidAshiq]

@KirillErz what is ur use case

[JungeWerther]

If anyone is still wondering, I got it solved with

const data: {
    name: string,
    type: string
}[] = [{
    name: "name",
    type: "string"
},
{
    name: "lastUsed",
    type: "date"
},
{
    name: "amount",
    type: "number"
}
]

type MyType = {
    [key: string]: string | number | Date;
};

export const columns: ColumnDef<MyType>[] = data.map((entry) => {
    switch(entry.type) {
        case "string":
            return {
                header: entry.name,
                accessorKey: entry.name
            }
        case "date":
            return {
                header: entry.name,
                accessorKey: entry.name,
                cell: ({row}) => {
                    return <DateDisplay date={row.original[entry.name]} />
                }
            }
        case "number":
            return {
                header: entry.name,
                accessorKey: entry.name,
            }
        default:
            return {
                header: entry.name,
                accessorKey: entry.name
            }
    }
})

And some custom component that formats the date. Just in case you want to pass along the type of something you fetch from db, for example, and format accordingly