How to export compound component in react js

Question

I am trying to get my hands on compound component pattern in ReactJS. And all is good but I am not able to export the component the way I want.

I have created one basic Table (Data Grid), which has many component like header, row, column, search, pagination etc.

And I want the end user to import this Table in this way.

import Table from './Table'

const DataGrid = () => {
     return (
        <Table>
            <Table.Title></Table.Title>
            <Table.Header>
                <Table.Row></Table.Row>
            </Table.Header>
        
            <Table.Body>
                <Table.Row></Table.Row>
            </Table.Body>
        </Table>
     )
}

Now in component folder, I have one index.js file where I am trying to import all component and then trying to export it in a object

import {Table} from './Table'
import {Title} from './Title'
import {Header} from './Header'
import {Body} from './Body'

Now what should I do to export in a way I want. Tried many solutions, but nothing is working.

May you share the code for ./Table? Specifically how you are exporting it — evolutionxbox
– evolutionxbox, Commented May 13, 2021 at 11:20
Please edit the question rather than posting code in the comments? Also, one line is not enough, please make sure the example is a minimal reproducible example. Show, not tell — evolutionxbox
– evolutionxbox, Commented May 13, 2021 at 11:24
@evolutionxbox The reason I didn't include it in answer itself because as I said I tried many different solution already and to list all of them here won't be a better choice. And if anyone already knows what needs to be done, he can clearly tell what needs to be done for this particular situation. He doesn't need to look what I am doing wrong. (For this particular question) — user10169731
– user10169731, Commented May 13, 2021 at 11:32

Ajeet Shah · Accepted Answer · 2021-05-13 12:47:59Z

5

You need to import everything in index file and prepare a new object and export it:

index.js:

import { Table } from "./Table"; // this imports from Table.jsx file
import { Title } from "./Title";
import { Body } from "./Body";
import { Header } from "./Header";
import { Row } from "./Row";

const all = Table; // <-- Here: this (all) is the new object.
// We can name it whatever we want as it is going to be a default export

all.Title = Title;
all.Body = Body;
all.Header = Header;
all.Row = Row;

export default all;

Now, you can use it like shown below:

DataGrid.jsx:

import Table from "./Table"; // this imports from index.js file under "Table" folder

const DataGrid = () => {
  return (
    <Table>
      <Table.Title></Table.Title>
      <Table.Header>
        <Table.Row></Table.Row>
      </Table.Header>

      <Table.Body>
        <Table.Row></Table.Row>
      </Table.Body>
    </Table>
  );
};

Edit:

This answer assumes that you have components under directories like below. Make sure to change the paths when importing if you have a different one.

src/
  Table/
    Body.jsx
    Header.jsx
    index.js
    Row.jsx
    Table.jsx
    Title.jsx
  DataGrid.jsx

edited May 13, 2021 at 12:47

answered May 13, 2021 at 12:20

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user10169731 Over a year ago

I swear, I tried this approach. But don't know why it didn't work that time. Now it is working. But now I am having another issue. Whichever props I am passing to any component (except Table itself), it is not being passed. Seems like I might need to use React.cloneElement to fix this issue or something else. NVM, thanks for your detailed answer.

user10169731 Over a year ago

It is working now, I was doing one silly mistake. Thanks man.

Mark Swardstrom · Accepted Answer · 2025-03-07 18:34:51Z

If the goal is to export a named compound component, it can be done like this:

const All = ({ children }: { children: ReactNode[] }) => {
  return (
    <table>
      <thead>{children[0]}</thead>
      <tbody>{children[1]}</tbody>
    </table>
  );
};

// Header row
const Thr = ({ children }: PropsWithChildren) => {
  return <tr>{children}</tr>;
};

const Tr = ({ children }: PropsWithChildren) => {
  return <tr>{children}</tr>;
};

const Th = ({ children }: PropsWithChildren) => {
  return <th>{children}</th>;
};

const Td = ({ children }: PropsWithChildren) => {
  return <td>{children}</td>;
};

All.Thr = Thr;
All.Th = Th;

All.Tr = Tr;
All.Td = Td;

export const Table = All;

It would be used like so:

import { Table } from '~/components';

export const MyTable = ({ items }) => {
  return (
    <Table>
      <Table.Thr>
        <Table.Th>Name</Table.Th>
      </Table.Thr>
      {items.map((item) => (
        <Table.Tr>
          <Table.Td>{item.name}</Table.Td>
        </Table.Tr>
      ))}
    </Table>

Collectives™ on Stack Overflow

How to export compound component in react js

2 Answers 2

Edit:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related