Exporting const to another file in React - reactjs

Question

I have a table component that is reusable with different column props. My app uses the component several times, and many times I use the same columns but not all. So I'm trying to export my "const columns = ..." to a separate file. the problem is it can't be a pure function, because I'm using useMemo and numeral... how can I move the my columns to a separate file so they can be accessed by multiple tables or defined separately if needed?
//App.js
import React from 'react'
import styled from 'styled-components'
import { useTable } from 'react-table'
import numeral from "numeral";
import makeData from './makeData'
function Table({ columns, data }) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
})
// Render the UI for your table
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}
function App() {
const columns = React.useMemo(
() => [
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
],
},
{
Header: 'Info',
columns: [
{
Header: 'COH',
accessor: 'age',
Cell: (props) => (
<div className="color1">
{numeral(props.value).format("$0,0.000")}
</div>
),
},
{
Header: 'Visits',
accessor: 'visits',
},
{
Header: 'Status',
accessor: 'status',
},
{
Header: 'Profile Progress',
accessor: 'progress',
},
],
},
],
[]
)
const MobileColumns = React.useMemo(
() => [
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
],
},
{
Header: 'Info',
columns: [
{
Header: 'COH',
accessor: 'age',
Cell: (props) => (
<div className="color1">
{numeral(props.value).format("$0,0.000")}
</div>
),
},
],
},
],
[]
)
const data = React.useMemo(() => makeData(20), [])
return (
<>
<div className="hide-mobile">
<Table columns={columns} data={data} />
</div>
<div className="show-mobile">
<Table columns={MobileColumns} data={data} />
</div>
</>
)
}
export default App
I attempted to create a new file called Columns.js like so, but I can't use useMemo there it seems.
// Columns.js
import React, { useMemo } from "react";
import numeral from "numeral";
export const columns = React.useMemo(
() => [
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
],
},
{
Header: 'Info',
columns: [
{
Header: 'COH',
accessor: 'age',
Cell: (props) => (
<div className="color1">
{numeral(props.value).format("$0,0.000")}
</div>
),
},
{
Header: 'Visits',
accessor: 'visits',
},
{
Header: 'Status',
accessor: 'status',
},
{
Header: 'Profile Progress',
accessor: 'progress',
},
],
},
],
[]
)
export const MobileColumns = React.useMemo(
() => [
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
],
},
{
Header: 'Info',
columns: [
{
Header: 'COH',
accessor: 'age',
Cell: (props) => (
<div className="color1">
{numeral(props.value).format("$0,0.000")}
</div>
),
},
],
},
],
[]
)
};