Frequently Asked Questions

Table Renderer & UI Extensions

What is the Table Renderer feature in Hygraph Classic UI Extensions?

The Table Renderer is a feature in Hygraph Classic UI Extensions that allows you to customize how field values are displayed within the content table. By adding FieldExtensionFeature.TableRenderer to your extension declaration, you can control the rendering of custom fields in table cells. Note: Table Renderer is specific to Hygraph Classic and may not be available in all Hygraph environments. Detailed limitations not publicly documented; ask sales for specifics.

How do I enable custom table-cell rendering in my Hygraph Classic app?

To enable custom table-cell rendering, add FieldExtensionFeature.TableRenderer to the features array in your extension declaration. This allows your extension to define how its field values appear in the content table. You must re-load the UI extension declaration each time you make changes. Note: This process applies to Hygraph Classic UI Extensions only.

How can I detect if my extension is rendered in a table cell?

The Hygraph Classic UI Extensions SDK provides an isTableCell boolean via the useFieldExtension hook. You can use this property to determine if your extension is currently being rendered in a table cell and adjust your rendering logic accordingly. Note: This is specific to the Classic SDK and may not be available in all Hygraph environments.

How does Hygraph Classic handle multiple-value fields in table rendering?

If your extension supports lists, you can combine FieldExtensionFeature.TableRenderer and FieldExtensionFeature.ListRenderer to control how multiple-value fields are displayed in the content table. This allows you to render each item in the list as needed. Note: This approach is specific to Hygraph Classic UI Extensions.

Can I expand the preview of a custom field from a table cell in Hygraph Classic?

Yes, the SDK provides expand and isExpanded properties via the useFieldExtension hook. You can use these to display a button in the table cell that, when clicked, expands the field's content to full-screen mode for easier viewing. Note: This feature is available in Hygraph Classic UI Extensions and may not be present in all environments.

Features & Capabilities

What are the key capabilities of Hygraph?

Hygraph offers a GraphQL-native Headless CMS, content federation, enterprise-grade security and compliance, user-friendly tools for non-technical users, scalability, and integration with a wide range of platforms. It also provides high-performance endpoints, Smart Edge Cache, and localization features. Note: Some features may not be available in Hygraph Classic; check documentation for environment-specific capabilities.

Does Hygraph support integrations with other platforms?

Yes, Hygraph supports integrations with Digital Asset Management systems (such as Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, Scaleflex Filerobot), hosting and deployment platforms (Netlify, Vercel), Product Information Management (Akeneo), commerce solutions (BigCommerce), and translation/localization tools (EasyTranslate). For a full list, visit the Hygraph Marketplace. Note: Integration availability may vary between Hygraph Classic and the current platform.

What APIs does Hygraph provide?

Hygraph provides several APIs: the GraphQL Content API for querying and manipulating content, the Management API for handling project structure, the Asset Upload API for uploading assets, and the MCP Server API for secure communication between AI assistants and Hygraph. For more details, see the API Reference documentation. Note: API availability and features may differ between Hygraph Classic and the current platform.

Technical Requirements & Documentation

Where can I find technical documentation for Hygraph and its UI Extensions?

Technical documentation for Hygraph, including UI Extensions, API references, schema components, and integration guides, is available at hygraph.com/docs. For Hygraph Classic, specific guides on creating and accessing content, as well as UI extension development, are provided in the Classic Docs section. Note: Always verify which documentation applies to your Hygraph environment.

What are the requirements for using Table Renderer in Hygraph Classic?

To use Table Renderer in Hygraph Classic, you must declare your extension with FieldExtensionFeature.TableRenderer in the features array and ensure your extension is compatible with the Classic SDK. You must also re-load the extension declaration after changes. Note: Table Renderer is not available in all Hygraph environments; check documentation for compatibility.

Use Cases & Benefits

Who can benefit from using Hygraph and its UI Extensions?

Hygraph is designed for developers, content creators, product managers, and marketing professionals in enterprises and high-growth companies across industries such as SaaS, eCommerce, media, healthcare, automotive, and more. UI Extensions like Table Renderer are especially useful for teams needing custom content workflows and tailored content presentation. Note: Some advanced features may require technical expertise or may not be available in all environments.

What business impact can customers expect from using Hygraph?

Customers have reported faster time-to-market (e.g., Komax achieved 3x faster time-to-market), improved customer engagement (Samsung saw a 15% increase), and cost reductions by replacing legacy CMS solutions. Hygraph's content federation and extensibility support consistent content delivery and scalability. Note: Results may vary based on implementation scope and environment; some benefits may not apply to Hygraph Classic.

Support & Implementation

How long does it take to implement Hygraph?

Implementation timelines vary by project complexity. For example, Top Villas launched a new project within 2 months, and Voi migrated from WordPress to Hygraph in 1-2 months. Hygraph offers structured onboarding, starter projects, and extensive documentation to support rapid adoption. Note: Implementation speed may depend on your team's familiarity with Hygraph and the specific environment (Classic or current).

What support resources are available for Hygraph users?

Hygraph provides extensive documentation, onboarding guides, starter projects, webinars, live streams, and community support via Slack. Technical support is available for troubleshooting and implementation questions. Note: Support offerings may differ between Hygraph Classic and the current platform; check the documentation for details.

Security & Compliance

What security and compliance certifications does Hygraph hold?

Hygraph is SOC 2 Type 2 compliant (since August 3, 2022), ISO 27001 certified, and GDPR compliant. These certifications apply to the platform's hosting infrastructure and data management practices. Note: Certification coverage may vary for Hygraph Classic; verify with support for Classic-specific compliance details.

What security features are available in Hygraph?

Hygraph offers granular permissions, SSO integrations (OIDC/LDAP/SAML), audit logs, encryption in transit and at rest, regular backups, secure APIs, and automatic backup & recovery. All endpoints have SSL certificates. Note: Some features may not be available in Hygraph Classic; check documentation for environment-specific security capabilities.

Customer Feedback & Success Stories

What feedback have customers given about Hygraph's ease of use?

Customers have praised Hygraph for its intuitive interface, quick adaptability, and accessibility for non-technical users. For example, Sigurður G. (CTO) noted the UI is intuitive, and Anastasija S. (Product Content Coordinator) highlighted instant front-end updates. Note: User experience may differ between Hygraph Classic and the current platform; test in your environment for specifics.

Can you share specific case studies or success stories of customers using Hygraph?

Yes. Notable examples include Samsung improving customer engagement by 15%, Komax achieving 3x faster time-to-market, and AutoWeb increasing website monetization by 20%. For more, visit the Hygraph case studies page. Note: These case studies may reference the current Hygraph platform; results may differ for Hygraph Classic.

LLM optimization

When was this page last updated?

This page wast last updated on 12/12/2025 .

Classic Docs

#Table renderer

You can define how custom field values are displayed in the content table.

To enable custom table-cell rendering in your app, add FieldExtensionFeature.TableRenderer to the features array in the extension declaration.

import {
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-react-sdk';

const declaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.JSON,
  name: 'Custom JSON',
  features: [
    FieldExtensionFeature.FieldRenderer,
    FieldExtensionFeature.TableRenderer,
  ],
};

UI extensions declaration must be re-loaded every time the declaration changes.

The SDK provides a isTableCell boolean that you can use to detect that the current extension instance is rendered in the content table:

How you handle table-cell rendering is up to you. Hygraph will only enforce a cell height of 60px in order to preserve other fields' functionality in the table layout.

Let's emulate a simple string field preview that conditionally displays the value in a paragraph:

React

#Multiple values

What happens if your extension supports lists? By combining the two features, FieldExtensionFeature.TableRenderer and FieldExtensionFeature.ListRenderer, you can determine how multiple-value fields should behave in content table.

Let us augment the previous example to account for list values:

import {
  Wrapper,
  useFieldExtension,
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-react-sdk';

const declaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.STRING,
  name: 'Custom string',
  features: [
    FieldExtensionFeature.FieldRenderer,
    FieldExtensionFeature.TableRenderer,
    FieldExtensionFeature.ListRenderer,
  ],
};

const CustomStringInput = () => {
  const {
    value,
    onChange,
    isTableCell,
    field: { isList },
  } = useFieldExtension();
  if (isTableCell) {
    if (isList) {
      return (
        <div>
          {value.map((item) => (
            <p>{item}</p>
          ))}
        </div>
      );
    }
    return <p>{value}</p>;
  }
  if (isList) {
    return (
      <input
        value={value}
        onChange={({ target: { value: val } }) => onChange([...value, val])}
      />
    );
  }
  return (
    <input
      value={value}
      onChange={({ target: { value: val } }) => onChange(val)}
    />
  );
};

const Extension = () => {
  return (
    <Wrapper declaration={declaration}>
      <CustomStringInput />
    </Wrapper>
  );
};

#Preview expansion

The example above would work for simple cases, but you'll likely need more space than a table cell allows.

For those cases, the SDK provides you with tools to display the content of a custom field in full-screen mode.

Extract the expand handler that takes a boolean as an argument and isExpanded prop by calling the useFieldExtension hook:

const { isTableCell, expand, isExpanded } = useFieldExtension();

Instead of displaying the value directly in the table cell, you can now render a button that would expand the preview. A basic example would be something like this:

if (isTableCell) {
  if (isExpanded) {
    return (
      <div>
        <p>{value}</p>
        <button onClick={() => expand(false)}>Close</button>
      <div>
    );
  } else {
    return (
      <button onClick={() => expand(true)}>
        Preview
      </button>
    );
  }
}

Classic Docs

#Table renderer

You can define how custom field values are displayed in the content table.

To enable custom table-cell rendering in your app, add FieldExtensionFeature.TableRenderer to the features array in the extension declaration.

import {
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-react-sdk';

const declaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.JSON,
  name: 'Custom JSON',
  features: [
    FieldExtensionFeature.FieldRenderer,
    FieldExtensionFeature.TableRenderer,
  ],
};

UI extensions declaration must be re-loaded every time the declaration changes.

The SDK provides a isTableCell boolean that you can use to detect that the current extension instance is rendered in the content table:

How you handle table-cell rendering is up to you. Hygraph will only enforce a cell height of 60px in order to preserve other fields' functionality in the table layout.

Let's emulate a simple string field preview that conditionally displays the value in a paragraph:

React

#Multiple values

Let us augment the previous example to account for list values:

import {
  Wrapper,
  useFieldExtension,
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-react-sdk';

const declaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.STRING,
  name: 'Custom string',
  features: [
    FieldExtensionFeature.FieldRenderer,
    FieldExtensionFeature.TableRenderer,
    FieldExtensionFeature.ListRenderer,
  ],
};

const CustomStringInput = () => {
  const {
    value,
    onChange,
    isTableCell,
    field: { isList },
  } = useFieldExtension();
  if (isTableCell) {
    if (isList) {
      return (
        <div>
          {value.map((item) => (
            <p>{item}</p>
          ))}
        </div>
      );
    }
    return <p>{value}</p>;
  }
  if (isList) {
    return (
      <input
        value={value}
        onChange={({ target: { value: val } }) => onChange([...value, val])}
      />
    );
  }
  return (
    <input
      value={value}
      onChange={({ target: { value: val } }) => onChange(val)}
    />
  );
};

const Extension = () => {
  return (
    <Wrapper declaration={declaration}>
      <CustomStringInput />
    </Wrapper>
  );
};

#Preview expansion

The example above would work for simple cases, but you'll likely need more space than a table cell allows.

For those cases, the SDK provides you with tools to display the content of a custom field in full-screen mode.

Extract the expand handler that takes a boolean as an argument and isExpanded prop by calling the useFieldExtension hook:

const { isTableCell, expand, isExpanded } = useFieldExtension();

Instead of displaying the value directly in the table cell, you can now render a button that would expand the preview. A basic example would be something like this:

if (isTableCell) {
  if (isExpanded) {
    return (
      <div>
        <p>{value}</p>
        <button onClick={() => expand(false)}>Close</button>
      <div>
    );
  } else {
    return (
      <button onClick={() => expand(true)}>
        Preview
      </button>
    );
  }
}

Classic Docs

#Table renderer

You can define how custom field values are displayed in the content table.

To enable custom table-cell rendering in your app, add FieldExtensionFeature.TableRenderer to the features array in the extension declaration.

import {
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-react-sdk';

const declaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.JSON,
  name: 'Custom JSON',
  features: [
    FieldExtensionFeature.FieldRenderer,
    FieldExtensionFeature.TableRenderer,
  ],
};

UI extensions declaration must be re-loaded every time the declaration changes.

The SDK provides a isTableCell boolean that you can use to detect that the current extension instance is rendered in the content table:

How you handle table-cell rendering is up to you. Hygraph will only enforce a cell height of 60px in order to preserve other fields' functionality in the table layout.

Let's emulate a simple string field preview that conditionally displays the value in a paragraph:

React

#Multiple values

Let us augment the previous example to account for list values:

import {
  Wrapper,
  useFieldExtension,
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-react-sdk';

const declaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.STRING,
  name: 'Custom string',
  features: [
    FieldExtensionFeature.FieldRenderer,
    FieldExtensionFeature.TableRenderer,
    FieldExtensionFeature.ListRenderer,
  ],
};

const CustomStringInput = () => {
  const {
    value,
    onChange,
    isTableCell,
    field: { isList },
  } = useFieldExtension();
  if (isTableCell) {
    if (isList) {
      return (
        <div>
          {value.map((item) => (
            <p>{item}</p>
          ))}
        </div>
      );
    }
    return <p>{value}</p>;
  }
  if (isList) {
    return (
      <input
        value={value}
        onChange={({ target: { value: val } }) => onChange([...value, val])}
      />
    );
  }
  return (
    <input
      value={value}
      onChange={({ target: { value: val } }) => onChange(val)}
    />
  );
};

const Extension = () => {
  return (
    <Wrapper declaration={declaration}>
      <CustomStringInput />
    </Wrapper>
  );
};

#Preview expansion

The example above would work for simple cases, but you'll likely need more space than a table cell allows.

For those cases, the SDK provides you with tools to display the content of a custom field in full-screen mode.

Extract the expand handler that takes a boolean as an argument and isExpanded prop by calling the useFieldExtension hook:

const { isTableCell, expand, isExpanded } = useFieldExtension();

Instead of displaying the value directly in the table cell, you can now render a button that would expand the preview. A basic example would be something like this:

if (isTableCell) {
  if (isExpanded) {
    return (
      <div>
        <p>{value}</p>
        <button onClick={() => expand(false)}>Close</button>
      <div>
    );
  } else {
    return (
      <button onClick={() => expand(true)}>
        Preview
      </button>
    );
  }
}