equal-aqua•3mo ago

How to draw an array list with 3rd depth?

interface ISubscriptionDetail {
  id: number;
  member_name: string;
  member_id: string;
  subscription_id: string;
  product_name: string;
  quantity: number; 
  round: string;
  delivery_cycle: string;
  last_order_date: string;
  last_order_count: number;
  expect_order_date: string;
}

interface ISubscription {
  [key: string]: ISubscriptionDetail[];
}

interface IMember {
  id: number;
  member_name: string;
  subscriptions: ISubscription[];
}

interface ISubscriptionDetail {
  id: number;
  member_name: string;
  member_id: string;
  subscription_id: string;
  product_name: string;
  quantity: number; 
  round: string;
  delivery_cycle: string;
  last_order_date: string;
  last_order_count: number;
  expect_order_date: string;
}

interface ISubscription {
  [key: string]: ISubscriptionDetail[];
}

interface IMember {
  id: number;
  member_name: string;
  subscriptions: ISubscription[];
}

const columns = React.useMemo<GridColDef<IMember>[]>(
    () => [
      {
        field: 'member_name',
        flex: 1,
        headerName: '회원 닉네임 (아이디)',
        groupable: true,
        minWidth: 150,
        renderCell: function render({ row }) {
          const memberName = row.member_name
          const memberEmail = row.member_id
          return (
            <>
              <div>
                {memberName}
                <br />
                {memberEmail}
              </div>
            </>
          )
        },
      },
      {
        field: 'subscription_id',
        flex: 1,
        headerName: '정기구독 신청번호',
        minWidth: 150,        
        renderCell: function render({ row }) {
          return (
            <>
              <div>
                
              </div>
            </>
          )
        }
      },
      {
        field: 'product_name',
        flex: 1,
        headerName: '상품명',
        minWidth: 150,
        renderCell: function render({ row }) {
          return (
            <>
              <div>
                {row.product_name}
              </div>
            </>
          )
        },
      },

const columns = React.useMemo<GridColDef<IMember>[]>(
    () => [
      {
        field: 'member_name',
        flex: 1,
        headerName: '회원 닉네임 (아이디)',
        groupable: true,
        minWidth: 150,
        renderCell: function render({ row }) {
          const memberName = row.member_name
          const memberEmail = row.member_id
          return (
            <>
              <div>
                {memberName}
                <br />
                {memberEmail}
              </div>
            </>
          )
        },
      },
      {
        field: 'subscription_id',
        flex: 1,
        headerName: '정기구독 신청번호',
        minWidth: 150,        
        renderCell: function render({ row }) {
          return (
            <>
              <div>
                
              </div>
            </>
          )
        }
      },
      {
        field: 'product_name',
        flex: 1,
        headerName: '상품명',
        minWidth: 150,
        renderCell: function render({ row }) {
          return (
            <>
              <div>
                {row.product_name}
              </div>
            </>
          )
        },
      },

8 Replies

kapa.ai•3mo ago

Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, there isn't a direct example of how to draw an array list with 3rd depth using the refine framework. However, you can use the renderCell function to access and display nested data in your DataGrid component. Here's a general idea of how you might approach this:

{
  field: 'subscriptions',
  headerName: 'Subscriptions',
  renderCell: function render({ row }) {
    return (
      <>
        {row.subscriptions.map((subscription, index) => (
          <div key={index}>
            {subscription.map((detail, detailIndex) => (
              <div key={detailIndex}>
                {detail.product_name} - {detail.quantity}
              </div>
            ))}
          </div>
        ))}
      </>
    )
  },
},

{
  field: 'subscriptions',
  headerName: 'Subscriptions',
  renderCell: function render({ row }) {
    return (
      <>
        {row.subscriptions.map((subscription, index) => (
          <div key={index}>
            {subscription.map((detail, detailIndex) => (
              <div key={detailIndex}>
                {detail.product_name} - {detail.quantity}
              </div>
            ))}
          </div>
        ))}
      </>
    )
  },
},

In this example, we're mapping over the subscriptions array for each member, and then mapping over the details array within each subscription. We're then displaying the product_name and quantity for each detail. Please note that this is a simplified example and you may need to adjust it based on your actual data structure and what you want to display. For more information on how to use the DataGrid component in refine, you can refer to the official documentation (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

equal-aqua•3mo ago

@kapa.ai Parameter 'detail' implicitly has an 'any' type.ts(7006)

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The TypeScript error Parameter 'detail' implicitly has an 'any' type.ts(7006) is indicating that TypeScript is unable to infer the type of the detail parameter in your function. To fix this, you can explicitly provide the type for detail based on your ISubscriptionDetail interface. Here's how you can do it:

{{
  field: 'subscriptions',
  headerName: 'Subscriptions',
  renderCell: function render({{ row }}) {{
    return (
      <>
        {row.subscriptions.map((subscription: ISubscriptionDetail[], index: number) => (
          <div key={index}>
            {subscription.map((detail: ISubscriptionDetail, detailIndex: number) => (
              <div key={detailIndex}>
                {detail.product_name} - {detail.quantity}
              </div>
            ))}
          </div>
        ))}
      </>
    )
  }},
}},

{{
  field: 'subscriptions',
  headerName: 'Subscriptions',
  renderCell: function render({{ row }}) {{
    return (
      <>
        {row.subscriptions.map((subscription: ISubscriptionDetail[], index: number) => (
          <div key={index}>
            {subscription.map((detail: ISubscriptionDetail, detailIndex: number) => (
              <div key={detailIndex}>
                {detail.product_name} - {detail.quantity}
              </div>
            ))}
          </div>
        ))}
      </>
    )
  }},
}},

In this updated code, subscription is typed as ISubscriptionDetail[] and detail is typed as ISubscriptionDetail. This tells TypeScript exactly what type of data to expect, which should resolve the error. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

equal-aqua•3mo ago

@kapa.ai This expression is not callable. Type 'ISubscriptionDetail[]' has no call signatures.ts(2349)

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message Type 'ISubscriptionDetail[]' has no call signatures.ts(2349) is indicating that you're trying to call ISubscriptionDetail[] as a function, but it's an array, not a function. Based on your IMember interface, subscriptions is an array of ISubscription objects, not ISubscriptionDetail. Each ISubscription is an object with keys as strings and values as ISubscriptionDetail[]. You might need to adjust your code to correctly iterate over the subscriptions array and then over the ISubscriptionDetail[] for each key in the ISubscription object. However, without more context or a clearer understanding of your data structure, it's difficult to provide a more specific solution. Here's a general idea of how you might approach this:

{{
  field: 'subscriptions',
  headerName: 'Subscriptions',
  renderCell: function render({{ row }}) {{
    return (
      <>
        {{row.subscriptions.map((subscription: ISubscription, index: number) => (
          <div key={{index}}>
            {Object.values(subscription).map((details: ISubscriptionDetail[], detailIndex: number) => (
              <div key={{detailIndex}}>
                {details.map((detail: ISubscriptionDetail, index: number) => (
                  <div key={{index}}>
                    {{detail.product_name}} - {{detail.quantity}}
                  </div>
                ))}
              </div>
            ))}
          </div>
        ))}}
      </>
    )
  }},
}},

{{
  field: 'subscriptions',
  headerName: 'Subscriptions',
  renderCell: function render({{ row }}) {{
    return (
      <>
        {{row.subscriptions.map((subscription: ISubscription, index: number) => (
          <div key={{index}}>
            {Object.values(subscription).map((details: ISubscriptionDetail[], detailIndex: number) => (
              <div key={{detailIndex}}>
                {details.map((detail: ISubscriptionDetail, index: number) => (
                  <div key={{index}}>
                    {{detail.product_name}} - {{detail.quantity}}
                  </div>
                ))}
              </div>
            ))}
          </div>
        ))}}
      </>
    )
  }},
}},

In this updated code, we're first mapping over the subscriptions array. For each subscription, we're then mapping over the values (which should be ISubscriptionDetail[]), and then mapping over each detail in details. We're then displaying the product_name and quantity for each detail. Please note that this is a simplified example and you may need to adjust it based on your actual data structure and what you want to display. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below