nextui/apps/docs/content/components/table/dynamic.ts

const App = `import { Table } from '@nextui-org/react';
    
export default function App() {
  const columns = [
    {
      key: 'name',
      label: 'NAME',
    },
    {
      key: 'role',
      label: 'ROLE',
    },
    {
      key: 'status',
      label: 'STATUS',
    },
  ];
  const rows = [
    {
      key: '1',
      name: 'Tony Reichert',
      role: 'CEO',
      status: 'Active',
    },
    {
      key: '2',
      name: 'Zoey Lang',
      role: 'Technical Lead',
      status: 'Paused',
    },
    {
      key: '3',
      name: 'Jane Fisher',
      role: 'Senior Developer',
      status: 'Active',
    },
    {
      key: '4',
      name: 'William Howard',
      role: 'Community Manager',
      status: 'Vacation',
    },
  ];
  return <Table
      aria-label="Example dynamic collection table"
      css={{
        height: 'auto',
        minWidth: '100%',
      }}
    >
     <Table.Header columns={columns}>
        {(column) => (
          <Table.Column key={column.key}>{column.label}</Table.Column>
        )}
      </Table.Header>
      <Table.Body items={rows}>
        {(item) => (
          <Table.Row key={item.key}>
            {(columnKey) => (
              <Table.Cell>{item[columnKey]}</Table.Cell>
            )}
          </Table.Row>
        )}
      </Table.Body>
  </Table>;
}
`;

const react = {
  '/App.js': App
};

export default {
  ...react
};