Generating Index.tsx Page

Basic text:

TypeScript
{
  title: 'Nome',
  dataIndex: 'nome',
  key: 'nome',
  minWidth: 150,
  ellipsis: true,
}

Boolean:

TypeScript
{
  title: 'Ativo',
  dataIndex: 'is_active',
  key: 'is_active',
  type: 'boolean',
  minWidth: 100,
}

Date with picker:

TypeScript
{
  title: 'Data',
  dataIndex: 'data',
  key: 'data',
  type: 'date',
  minWidth: 150,
  dateProps: {
    format: 'MMM/YYYY',
    picker: 'month',
    parseFormat: 'YYYY-MM-DD',
    renderFormat: true,
  },
}

Filter (static options):

TypeScript
{
  title: 'Tipo',
  dataIndex: 'tipo__label',
  key: 'tipo__label',
  type: 'filter',
  filters: [
    { text: 'Budget', value: 'Budget' },
    { text: 'Forecast', value: 'Forecast' },
  ],
}

Select (component-based):

TypeScript
{
  title: 'Cargo',
  dataIndex: 'cargo__label',
  key: 'cargo__label',
  type: 'select',
  select: {
    component: SelectCargo,
    props: {
      multiple: true,
      isInstanceForColumnFilter: true,
    },
  },
}

forwardRef Pattern (Tabs)

TypeScript
export interface ForwardEntityRefProps {
  addEntity: () => void;
}

export default forwardRef<ForwardEntityRefProps>((props, ref) => {
  const addEntity = () => {
    // External form: setOpenForm(true)
    // Inline editable: add new row and start editing
  };

  useImperativeHandle(ref, () => ({ addEntity }));
  // ...
});

Pagination onChange

TypeScript
onChange={(pagination, filters, sorter: any) => {
  const current = pagination.pageSize === queryStringParams.page_size
    ? (pagination.current as number) : 1;
  const size = pagination.pageSize as number;
  
  let orderBy = DEFAULT_ORDER_BY;
  if (sorter.columnKey)
    orderBy = `${sorter.order === 'descend' ? '-' : ''}${sorter.columnKey}`;

  setQueryStringParams({
    page: current,
    page_size: size,
    order_by: orderBy,
    ...processFilters(filters),
  });
}}

ignoreColumnKeys Logic

TypeScript
// Non-versioned standalone
ignoreColumnKeys={['acoes']}

// Versioned tab  
ignoreColumnKeys={!selectedVersao?.id ? columns.map(c => c.key as string) : ['acoes']}

// Editable tab
ignoreColumnKeys={
  editingKey !== '' || !selectedVersao?.id
    ? columns.map(c => c.key as string)
    : ['acoes']
}

Data Mapping

TypeScript
// Non-editable (spread)
setData(entities.results.map(c => ({ key: c.id.toString(), ...c })));

// Editable (explicit)
setData(entities.results.map(c => ({
  key: c.id.toString(),
  id: c.id,
  nome: c.nome,
  cargo__label: c.cargo__label,
})));

EditableCell Component

TypeScript
const EditableCell: React.FC<EditableCellProps> = ({
  editing, inputType, children, formName, ...restProps
}) => {
  const inputNodeMap = {
    nome: <Input />,
    cargo: <SelectCargo />,
    data: <DatePicker.MonthPicker format="MMM/YYYY" />,
    percent: <InputPercent max={100} />,
  };

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item name={formName} style={{ margin: 0 }}>
          {inputNodeMap[inputType]}
        </Form.Item>
      ) : children}
    </td>
  );
};

mergedColumns

TypeScript
const mergedColumns = columns.map(col => {
  if (!col.editable) return col;
  return {
    ...col,
    onCell: (record: DataType) => ({
      record,
      inputType: col.dataIndex,
      formName: col.dataIndex,
      title: col.title,
      editing: isEditing(record),
    }),
  };
});

• Column keys match API fields: Use exact field names from API response
• Default ordering: Always include DEFAULT_ORDER_BY = '-updated_at'
• Consistent width: Use minWidth instead of width for flexibility
• Fixed actions column: Always fixed: 'right' for actions
• Proper loading states: Use mixLoadings for multiple loading sources
• Version dependency: Disable actions when !selectedVersao?.id in versioned tabs

• Wrong ignoreColumnKeys: Using static array instead of dynamic for versioned/editable tables
• Missing forwardRef: Tabs must use forwardRef to expose addEntity method
• Incorrect data mapping: Editable tables need explicit field mapping, not spread
• Wrong add button location: Tabs put add button in parent container, not self
• Missing field validation: Editable forms need proper Form.Item rules
• Inconsistent column types: __label fields need type decision (select vs filter)