react-final-table icon indicating copy to clipboard operation
react-final-table copied to clipboard

Unable to create columns with actions

Open austinbuckler opened this issue 5 years ago • 1 comments

Great library, I definitely appreciate that this has been fully written in TypeScript.

I recently tried adding an actions column to my table but was unable because the row data must have the column name present. My workaround for this involves passing a null value to the column name. While this isn't a show-stopper by any means, I think it would be more appropriate to allow column fields to not be present.

I noticed that this line is where the check for the column name is present. https://github.com/Buuntu/react-final-table/blob/3bb860fa97e6c255a344ee3993edafb8ed0214b4/src/hooks.tsx#L384

Another solution I would like to propose would involve adding a excludedColumns field that would allow us to explicitly define which columns we would like to pass the check.

const sortDataInOrder = <T extends DataType>(
  data: T[],
  columns: ColumnType<T>[],
  excludedColumns: string[],
): T[] => {
  return data.map((row: any) => {
    const newRow: any = {};
    columns.forEach(column => {
      if (!(column.name in row) && excludedColumns.indexOf(column.name) === -1) {
        throw new Error(`Invalid row data, ${column.name} not found or was not defined in excludedColumns`);
      }
      newRow[column.name] = row[column.name];
    });
    return newRow;
  });
};

I am more than happy to contribute a PR to add this functionality.

austinbuckler avatar Jan 03 '21 05:01 austinbuckler

Great library, I definitely appreciate that this has been fully written in TypeScript.

I recently tried adding an actions column to my table but was unable because the row data must have the column name present. My workaround for this involves passing a null value to the column name. While this isn't a show-stopper by any means, I think it would be more appropriate to allow column fields to not be present.

I noticed that this line is where the check for the column name is present. https://github.com/Buuntu/react-final-table/blob/3bb860fa97e6c255a344ee3993edafb8ed0214b4/src/hooks.tsx#L384

Another solution I would like to propose would involve adding a excludedColumns field that would allow us to explicitly define which columns we would like to pass the check.

const sortDataInOrder = <T extends DataType>(
  data: T[],
  columns: ColumnType<T>[],
  excludedColumns: string[],
): T[] => {
  return data.map((row: any) => {
    const newRow: any = {};
    columns.forEach(column => {
      if (!(column.name in row) && excludedColumns.indexOf(column.name) === -1) {
        throw new Error(`Invalid row data, ${column.name} not found or was not defined in excludedColumns`);
      }
      newRow[column.name] = row[column.name];
    });
    return newRow;
  });
};

I am more than happy to contribute a PR to add this functionality.

Sorry for the late reply @austinbuckler. You are right, I would gladly accept a PR for this.

Buuntu avatar Feb 16 '21 02:02 Buuntu