TableNex

Troubleshooting

TableNex is designed to be smooth, but issues can arise. This section covers common problems and their fixes.

Common Issues and Fixes

  1. "No data found" or "data.map is not a function" Shows Even with Data
    • Cause: data prop is empty, undefined, or malformed.
    • Fix: Ensure data is an array of objects.

    • JavaScript
      const data = [{ id: 1, name: "John" }]; // Not [] or {}
<TableNex data={data} />

  2. keyField Error:For keys, there should be one column with 'keyField'..
    • Cause: Default keyField="id" doesn’t match any column or data key.
    • Fix: Set keyField to a unique column in your data.

    • JavaScript
      const data = [{ orderId: "#1001", name: "John" }];
<TableNex data={data} keyField="orderId" />

  3. Styles Not Applying
    • Cause: CSS not loaded or overridden.
    • Fix: Import "react-tablenex/style.css" and check for conflicts. Use !important or Tailwind ! if needed.

    • JavaScript
      import "react-tablenex/style.css";
<TableNex styledRows={[{ keyValue: 1, className: "!bg-red-500" }]} />

  4. Fixed Columns Not Working
    • Cause: fixedColumns names don’t match accessor values and it works with few first and last columns.
    • Fix: Use exact, case-insensitive column names.

    • JavaScript
      const columns = [{ accessor: "Id" }, "name"];
<TableNex fixedColumns={["id", "name"]} /> // "Id" or "id" works

  5. Expanded Rows Not Showing
    • Cause: afterRowKey doesn’t match keyField values.
    • Fix: Ensure afterRowKey aligns with keyField.

    • JavaScript
      const data = [{ orderId: "#1001", name: "John" }];
<TableNex
  data={data}
  keyField="orderId"
  expandedRows={[{ afterRowKey: "#1001", element: <div>Details</div> }]}
/>

  6. Duplicate Key Error in Development
    • Cause: keyField values aren’t unique.
    • Fix: Use a column with distinct values.

    • JavaScript
      const data = [{ id: 1 }, { id: 2 }]; // Not { id: 1 }, { id: 1 }
<TableNex data={data} />

  7. Responsive Mode Not Switching
    • Cause: responsive= not set or CSS not loaded.
    • Fix: Enable responsive and import styles.

    • JavaScript
      import "react-tablenex/style.css";
<TableNex data={data} responsive={true} />

  8. Footer Not Displaying
    • Cause: footer prop is empty or data is empty (footer only shows with data).
    • Fix: Add valid footer and ensure data has rows.

    • JavaScript
      const footer = [{ cells: [{ content: "Total" }] }];
<TableNex data={[{ id: 1 }]} footer={footer} />

Tips

  • Check console for errors in development mode—they pinpoint issues like keyField.
  • Verify prop types with TypeScript to catch mistakes early.
  • Test with small datasets first to debug styling or features.


PreviousTypeScript Support
Next Examples