/>
MDX UI
$ init
Privacy Table

Privacy Table

GDPR-style personal data collection documentation table for privacy and compliance pages

Installation

npx @ravikumarsurya/mdx-ui add privacy-table

Usage

import { PrivacyTable } from "@/components/mdx/privacy-table";
 
<PrivacyTable
  rows={[
    {
      dataType: "Email Address",
      purpose: "Authentication",
      legalBasis: "Consent",
      retention: "Until deletion",
      shared: false,
    },
    {
      dataType: "Chipset Serial Number",
      purpose: "Device diagnostics",
      legalBasis: "Legitimate Interest",
      retention: "5 years",
      shared: true,
    },
  ]}
/>;

Examples

Data TypePurposeLegal BasisRetention3rd Party
Email AddressAccount authentication and notificationsConsentUntil account deletionNo
Usage AnalyticsProduct improvement and performance monitoringLegitimate Interest90 daysYes
Device IDSession tracking and securityContract1 yearNo

Data collected in accordance with privacy policy

Full GDPR Records of Processing Activities

<PrivacyTable
  rows={[
    {
      dataType: "Email Address",
      purpose: "Account authentication and notifications",
      legalBasis: "Consent",
      retention: "Until account deletion",
      shared: false,
    },
    {
      dataType: "Account Credentials",
      purpose: "Secure login",
      legalBasis: "Consent",
      retention: "Until account deletion",
      shared: false,
    },
    {
      dataType: "Chipset Serial Number",
      purpose: "Device identification and diagnostics",
      legalBasis: "Legitimate Interest",
      retention: "5 years",
      shared: true,
    },
    {
      dataType: "Battery Usage",
      purpose: "System performance analytics",
      legalBasis: "Legitimate Interest",
      retention: "90 days",
      shared: false,
    },
    {
      dataType: "Thermal Data",
      purpose: "Thermal management optimisation",
      legalBasis: "Legitimate Interest",
      retention: "90 days",
      shared: false,
    },
  ]}
  caption="Collected in accordance with the Qualcomm Privacy Policy"
/>

Minimal — purpose only

Columns are omitted when no row provides that data.

<PrivacyTable
  rows={[
    { dataType: "IP Address", purpose: "Network routing and abuse prevention" },
    {
      dataType: "Device Model",
      purpose: "Compatibility and feature detection",
    },
  ]}
/>

With third-party sharing highlighted

<PrivacyTable
  rows={[
    {
      dataType: "Analytics Events",
      purpose: "Product improvement",
      legalBasis: "Consent",
      shared: true,
    },
    {
      dataType: "Crash Reports",
      purpose: "Bug diagnostics",
      legalBasis: "Consent",
      shared: false,
    },
  ]}
/>

Props

PrivacyTable

PropTypeDefaultDescription
rowsPrivacyRow[]—Array of data rows (required)
captionstring—Optional caption below the table
classNamestring—Additional CSS classes

PrivacyRow

FieldTypeDescription
dataTypestringType of personal data collected (required)
purposestringWhy this data is collected (required)
legalBasisstringGDPR legal basis, e.g. "Consent", "Legitimate Interest"
retentionstringHow long data is kept, e.g. "90 days"
sharedbooleanWhether data is shared with third parties
PreviousHardware Spec
NextRegister Map