Contexts and resolved children

Hi, I'm trying to create a table component. The idea would be to have something like this:

const App = () => {
  return (
    <Table checkbox={true}>
      <Table.Headers>
        <>A</>
        <>B</>
        <>C</>
      </Table.Headers>
      <Table.Row>
        <>r1-c1</>
        <>r1-c2</>
        <>r1-c3</>
      </Table.Row>
      <Table.Row>
        <>r2-c1</>
        <>r2-c2</>
        <>r2-c3</>
      </Table.Row>
      <Table.Row>
        <>r3-c1</>
        <>r3-c2</>
        <>r3-c3</>
      </Table.Row>
    </Table>
  );
};

const App = () => {
  return (
    <Table checkbox={true}>
      <Table.Headers>
        <>A</>
        <>B</>
        <>C</>
      </Table.Headers>
      <Table.Row>
        <>r1-c1</>
        <>r1-c2</>
        <>r1-c3</>
      </Table.Row>
      <Table.Row>
        <>r2-c1</>
        <>r2-c2</>
        <>r2-c3</>
      </Table.Row>
      <Table.Row>
        <>r3-c1</>
        <>r3-c2</>
        <>r3-c3</>
      </Table.Row>
    </Table>
  );
};

Where the optional

checkbox

checkbox

attribute should get propagated to the rows and headers so that a check box is added as the first column if

checkbox == true

checkbox == true

. For that I'm trying to use a context, not sure if it's the best approach but I tried a couple other things and none work. However, as you can see here in the playground, when I try to separate the headers and rows like this:

  const resolvedChildren = children(() => props.children).toArray();
  const headers = resolvedChildren[0];
  const rows = resolvedChildren.slice(1);

  const resolvedChildren = children(() => props.children).toArray();
  const headers = resolvedChildren[0];
  const rows = resolvedChildren.slice(1);

I need to use the

children()

children()

function (at least that's the only way I know of to achieve this), and this doesn't play nice with the context since the children get evaluated before the context provider is set up, and so the default context value is always used and the checkboxes never show up.

I'd like to know if contexts are the correct approach here, and if so how to solve this issue with the resolved children.

Thanks!!

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

SolidJS•4mo ago•

4 replies

SilverLining

Contexts and resolved children

Hi, I'm trying to create a table component. The idea would be to have something like this:

const App = () => {
  return (
    <Table checkbox={true}>
      <Table.Headers>
        <>A</>
        <>B</>
        <>C</>
      </Table.Headers>
      <Table.Row>
        <>r1-c1</>
        <>r1-c2</>
        <>r1-c3</>
      </Table.Row>
      <Table.Row>
        <>r2-c1</>
        <>r2-c2</>
        <>r2-c3</>
      </Table.Row>
      <Table.Row>
        <>r3-c1</>
        <>r3-c2</>
        <>r3-c3</>
      </Table.Row>
    </Table>
  );
};

const App = () => {
  return (
    <Table checkbox={true}>
      <Table.Headers>
        <>A</>
        <>B</>
        <>C</>
      </Table.Headers>
      <Table.Row>
        <>r1-c1</>
        <>r1-c2</>
        <>r1-c3</>
      </Table.Row>
      <Table.Row>
        <>r2-c1</>
        <>r2-c2</>
        <>r2-c3</>
      </Table.Row>
      <Table.Row>
        <>r3-c1</>
        <>r3-c2</>
        <>r3-c3</>
      </Table.Row>
    </Table>
  );
};

Where the optional

checkbox

checkbox

attribute should get propagated to the rows and headers so that a check box is added as the first column if

checkbox == true

checkbox == true

  const resolvedChildren = children(() => props.children).toArray();
  const headers = resolvedChildren[0];
  const rows = resolvedChildren.slice(1);

  const resolvedChildren = children(() => props.children).toArray();
  const headers = resolvedChildren[0];
  const rows = resolvedChildren.slice(1);

I need to use the

children()

children()

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Contexts and resolved children

Similar Threads

Contexts and resolved children

Similar Threads

Similar Threads

Similar Threads