show certain column for user type

Question

After login I store user type in the local storage. There are types of users who should see last column of react table. I'm having problem in implementing this.

<ReactTable
          data={data}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[
            {
              Header: "Name",
              id: "name",
              accessor: "item.name",
              filterMethod: (filter, rows) =>
                matchSorter(rows, filter.value, { keys: ["name"] }),
              filterAll: true
            },
            {
              Header: "Public/Rare",
              id: "public_or_rare",
              accessor: "item.public_or_rare",
              filterMethod: (filter, rows) =>
                matchSorter(rows, filter.value, { keys: ["public_or_rare"] }),
              filterAll: true
            },
            {
              //I want to show something here if user is local or foreigner
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />

In top of page I retrieved user type as below, let user_type = localStorage.getItem('user_type');

How can I render last column if user is those type user ?

score 0 · Answer 1 · answered May 05 '19 at 20:43

Columns are defined in a table. You have this definition inlined - defined in place of usage.

You can always define this array earlier and use (pass as property) a reference to the array object.

Define columns content/config conditionally. In this case (the last column) you can define base config and conditionally extend it (array push) with additional column definition.

All these definitions can be done in render method, before JSX part ( return ( ) using normal/valnilla javascript.

show certain column for user type

1 Answers1