Reordering Rows From TableView

In most iOS apps, the user can use a swipe gesture to delete a row in a Table View. In this tutorial we will fill a Table View with some data and we will delete some rows.

Update: Jan 6, 2015. The rewritten version in Swift for iOS 8.1 and Xcode 6.1 is available here.

Open Xcode and create a new Single View Application. For product name, use ReorderingRowsDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards checkbox and Use Automatic Reference Counting checkbox are selected.

Go to the MainStoryboard file, delete the Existing View Controller and drag a new TableView Controller to the canvas. Also delete the ViewController.h and ViewController.m files from the project. Select the TableView Controller and In the Editor menu choose "Embed in Navigation Controller". This will put a Navigation Controller around the TableView Controller.

Next, Add a New Objective-C class to the project, make it a subview of UITableViewController and name it MyViewController. in MyViewController.m add the following property in the @interface section.


@interface NumberViewController ()

@property (nonatomic, strong) NSMutableArray *tableData;


In viewDidLoad we fill the array with numbers.

- (void)viewDidLoad 
    [super viewDidLoad];
    self.tableData = [@[@"One",@"Two",@"Three",@"Four",@"Five mutableCopy];

When we added our MyViewController class some methods are created from the TableViewController template. Next, we must alter some of this methods. In numberOfSectionsInTableView we change the return line to one, since we only have one section.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
    // Return the number of sections.     
    return 1; 

In the tableView:numberOfRowsInSection we will return the number of items in our array.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    // Return the number of rows in the section.
    return [self.numbers count];

In tableView:cellForRowAtIndexPath we will iterate through our numbers array and insert them in our TableView. Change this method in

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    // Configure the cell...
    cell.textLabel.text = self.numbers[indexPath.row];

    return cell;

Go back to the MainStoryboard and select the Table View. Select the Identity Inspector and change the Class to MyViewController.

Select the Empty Prototype Cell in the TableView and select the Attributes Inspector. Change the Table View Cell Identifier to Cell

Build and Run, The Table View is filled with the numbers.

To reorder the rows in a tableView we have to make sure our TableView is in editing mode. Go to the MainStoryboard and add a Bar Button Item to the right of the navigation bar of our Table View Controller. Select the Bar button item and in the Property inspector in the Identifier field change it to Edit. Select the Assistant Editor and open the MyViewController.m file. Ctrl and drag from the Edit button to the @interface section and create the following action.

Change the startEditing method

- (IBAction)startEditing:(id)sender
    self.editing = YES;

This will trigger the Editing Mode. The tableView has 2 delegate methods which are needed to control the movement of our rows. First create the following method so all rows can be moved.

- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
    return YES;

In the tableView:moveRowAtIndexPath:toIndexPath we will reorder the items in our tableData array.

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath 
    NSString *stringToMove = self.tableData[sourceIndexPath.row];
    [self.tableData removeObjectAtIndex:sourceIndexPath.row];
    [self.tableData insertObject:stringToMove atIndex:destinationIndexPath.row];

Build and Run and reorder the rows in our table view.

You can download the source code of the ReorderingRowsDemo at the ioscreator repository on github.