Table header auto generation by iterating through object keys

[kamzar1]

Is there a way to create the header by iterating through object keys?
Have checked the documentation so far, as well as examples, couldn't find any matching example.
Right now for every object need to define an individual header, makes it difficult having a multipurpose page (accepting any object as input) for creating a table.

[tannerlinsley]

You could write your own in a few lines:

const firstRow = rows[0]
const columns = React.useMemo(() => Object.keys(firstRow).map(key => {
  return {
    header: key,
    accessorKey: key,
  }
}), [firstRow])

Something to that effect.

[kamzar1]

Thanks for your suggestion.
It somehow hasn't work for me.
My bad! As a newbie to your code, arriving exactly at a major transition from js to typescript, there is lot to process.

Idea was, having a multipurpose or generic table, corresponding to request path, showing data of different tables or views(same table with variations of selected fields).

Work around was having rest api create an object with both, data and columns nested.

v7 might work, as for v8, how to deal with typescript "type" definitions?

[kamzar1]

It finally has worked.
The issue was, (firstRow).map came just as object{...} and not in an array[{...}].
Must either useState([]) or afterwards push the object into an empty array.
As in my case, fetch data is separated, this is how it looks like:

_GetData.js_
const GetAxiosCol = ({ url, id }) => {
    const [data, setData] = useState([]);
    const [col, setCol] = useState([])
    const fetchData = async () => {
      const { data } = await axios.get(url);
      setData(data);
      setCol(getColumns(data[0]));
    };
    useEffect(() => { fetchData(); }, [url]) // eslint-disable-next-line
    return {data, col};
  }
  function getColumns(data) {
    return Object.keys(data).map(key => {
      return {
        header: key,
        accessorKey: key,
      };
    });
  }

_App.js_
import { GetAxiosCol }  from './GetData'
function App(props) {
...
const datas = GetAxiosCol(params);
if (datas) {
  return (
<Table columns={datas.col} data={datas.data} />

Now is there a way to do:
accessorKey: row => row.lastName,
instead of shown above: accessorKey: key?