Function ParameterTable

components/parameter-table/ParameterTable.tsx:21–159

({
  slug,
  numPreviews = 0,
  heading = '',
  headers = [],
  parameters = [],
  bodyParameters,
  bodyParamExpandCallback = undefined,
  clickedBodyParameterName = '',
}: Props)

}

export function ParameterTable({
  slug,
  numPreviews = 0,
  heading = '',
  headers = [],
  parameters = [],
  bodyParameters,
  bodyParamExpandCallback = undefined,
  clickedBodyParameterName = '',
}: Props) {
  const { t } = useTranslation(['parameter_table', 'products'])
  const queryParams = parameters.filter((param) => param.in === 'query')
  const pathParams = parameters.filter((param) => param.in === 'path')

  return (
    <>
      {heading && (
        <h3 className="mt-4 mb-3 pt-3 h4" id={`${slug}--parameters`}>
          <a href={`#${slug}--parameters`}>{heading}</a>
        </h3>
      )}

      <table
        className={cx(styles.parameterTable)}
        summary="Column one has the type of parameter and the other columns show the name, type, and description of the parameters"
      >
        <thead>
          <tr>
            <th
              id="header"
              scope="col"
              className={cx(headers.length === 0 && 'visually-hidden', 'text-bold pl-0')}
            >
              {t('headers')}
            </th>
          </tr>
          <tr className="visually-hidden">
            <th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
          </tr>
        </thead>

        <tbody>
          {headers.length > 0 && (
            <>
              {headers.map((header, index) => (
                <ParameterRow
                  rowParams={header}
                  slug={slug}
                  numPreviews={numPreviews}
                  key={`${index}-${header.name}`}
                />
              ))}
            </>
          )}

          {pathParams.length > 0 && (
            <>
              <tr className="border-top-0">